waveform-analysis 0.1.36 → 0.1.37

package/dist/style.css

@@ -1,2 +1,2 @@
-.waveform-annotation-layer[data-v-7254383e]{pointer-events:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]{pointer-events:auto;cursor:grab;touch-action:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]:active{cursor:grabbing}.waveform-annotation__arrow[data-v-7254383e]{stroke-width:2px;stroke-linecap:round;pointer-events:none}.waveform-annotation__box[data-v-7254383e]{stroke-width:1px;rx:3}.waveform-annotation-layer--interactive .waveform-annotation__box[data-v-7254383e]{pointer-events:auto}.waveform-annotation__text[data-v-7254383e]{pointer-events:none;-webkit-user-select:none;user-select:none}.waveform-annotation-context-menu[data-v-c70c98a1]{z-index:30;background:#fff;border:1px solid #dfe5ef;border-radius:4px;min-width:112px;padding:4px;display:grid;position:absolute;box-shadow:0 4px 14px #10182829}.waveform-annotation-context-menu button[data-v-c70c98a1]{color:#344054;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:3px;padding:7px 10px;font-size:12px}.waveform-annotation-context-menu button[data-v-c70c98a1]:hover{background:#f2f4f7}.waveform-annotation-editor[data-v-52818b45]{z-index:40;background:#10182852;place-items:center;padding:20px;animation:.16s ease-out waveform-annotation-editor-fade-in-52818b45;display:grid;position:absolute;inset:0}.waveform-annotation-editor__panel[data-v-52818b45]{color:#344054;background:#fff;border:1px solid #e4e7ec;border-radius:12px;gap:20px;width:min(440px,100%);max-height:100%;padding:22px;font-size:13px;animation:.18s ease-out waveform-annotation-editor-rise-in-52818b45;display:grid;overflow-y:auto;box-shadow:0 20px 50px #10182838}.waveform-annotation-editor__header[data-v-52818b45]{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.waveform-annotation-editor__header h2[data-v-52818b45]{color:#101828;margin:0;font-size:18px;line-height:1.3}.waveform-annotation-editor__header p[data-v-52818b45]{color:#667085;margin:5px 0 0;font-size:12px}.waveform-annotation-editor__close[data-v-52818b45]{color:#667085;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:0 0 30px;place-items:center;width:30px;height:30px;padding:0;font-size:22px;line-height:1;display:inline-grid}.waveform-annotation-editor__close[data-v-52818b45]:hover{color:#101828;background:#f2f4f7}.waveform-annotation-editor__coordinates[data-v-52818b45]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.waveform-annotation-editor__coordinates span[data-v-52818b45],.waveform-annotation-editor__series[data-v-52818b45]{background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinates span[data-v-52818b45]{color:#667085}.waveform-annotation-editor__coordinates b[data-v-52818b45]{color:#1677ff;font-size:11px}.waveform-annotation-editor__coordinates code[data-v-52818b45]{color:#344054;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;overflow:hidden}.waveform-annotation-editor__series[data-v-52818b45]{gap:10px}.waveform-annotation-editor__series i[data-v-52818b45]{border:1px solid #0000001f;border-radius:2px;flex:0 0 12px;width:12px;height:12px}.waveform-annotation-editor__series-label[data-v-52818b45]{gap:1px;min-width:0;display:grid}.waveform-annotation-editor__series select[data-v-52818b45]{color:#344054;min-width:0;max-width:190px;font:inherit;background:#fff;border:1px solid #d0d5dd;border-radius:5px;margin-left:auto;padding:5px 7px}.waveform-annotation-editor__series small[data-v-52818b45]{color:#667085;font-size:10px}.waveform-annotation-editor__series b[data-v-52818b45]{color:#344054;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.waveform-annotation-editor__series code[data-v-52818b45]{color:#667085;margin-left:auto;font-size:11px}.waveform-annotation-editor__field[data-v-52818b45],.waveform-annotation-editor__color-field[data-v-52818b45]{gap:4px;display:grid}.waveform-annotation-editor__label-row[data-v-52818b45]{justify-content:space-between;align-items:center;gap:8px;display:flex}.waveform-annotation-editor__label-row b[data-v-52818b45],.waveform-annotation-editor__colors legend[data-v-52818b45]{color:#344054;font-size:12px;font-weight:600}.waveform-annotation-editor__label-row small[data-v-52818b45]{color:#98a2b3;font-size:11px}.waveform-annotation-editor textarea[data-v-52818b45]{box-sizing:border-box;color:#1d2939;width:100%;min-height:92px;font:inherit;resize:vertical;background:#fff;border:1px solid #d0d5dd;border-radius:7px;padding:10px 11px;line-height:1.5}.waveform-annotation-editor textarea[data-v-52818b45]:focus{border-color:#1677ff;outline:3px solid #1677ff24}.waveform-annotation-editor__colors[data-v-52818b45]{border:0;border-top:1px solid #eaecf0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;margin:0;padding:14px 0 0;display:grid}.waveform-annotation-editor__colors legend[data-v-52818b45]{grid-column:1/-1;padding:0}.waveform-annotation-editor__color-field[data-v-52818b45]{color:#667085;text-align:left;place-items:stretch stretch;min-width:0;font-size:11px}.waveform-annotation-editor__color-field[data-v-52818b45] .vc-color-wrap{border:1px solid #cfd5df;border-radius:6px;width:100%;height:34px;margin-right:0;box-shadow:inset 0 0 0 1px #ffffff61}.waveform-annotation-editor__color-field[data-v-52818b45] .vc-color-wrap:hover{border-color:#98a2b3;box-shadow:0 0 0 3px #1677ff1f}.waveform-annotation-editor__actions[data-v-52818b45]{border-top:1px solid #eaecf0;justify-content:flex-end;gap:8px;padding-top:8px;display:flex}.waveform-annotation-editor__actions button[data-v-52818b45]{color:#475467;cursor:pointer;background:#fff;border:1px solid #d0d5dd;border-radius:6px;height:34px;padding:0 12px}.waveform-annotation-editor__actions button.is-primary[data-v-52818b45]{color:#fff;background:#1677ff;border-color:#1677ff}.waveform-annotation-editor__actions button[data-v-52818b45]:disabled{opacity:.45;cursor:not-allowed}@keyframes waveform-annotation-editor-fade-in-52818b45{0%{opacity:0}to{opacity:1}}@keyframes waveform-annotation-editor-rise-in-52818b45{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=420px){.waveform-annotation-editor[data-v-52818b45]{padding:12px}.waveform-annotation-editor__panel[data-v-52818b45]{gap:16px;padding:18px}.waveform-annotation-editor__coordinates[data-v-52818b45]{grid-template-columns:1fr}}.waveform-tooltip[data-v-1f55d6c8]{box-sizing:border-box;z-index:2;color:#505050;pointer-events:none;background:#fff;border:1px solid #e3e7eb;border-radius:4px;gap:2px;width:max-content;max-width:min(560px,100% - 16px);padding:9px 12px;font:14px/1.35 Arial,sans-serif;display:grid;position:absolute;box-shadow:0 3px 10px #10182826}.waveform-tooltip__series[data-v-1f55d6c8]{grid-template-columns:8px minmax(0,1fr);align-items:start;gap:6px;display:grid}.waveform-tooltip__series i[data-v-1f55d6c8]{border-radius:50%;flex:none;width:8px;height:8px;margin-top:4px}.waveform-tooltip__series-content[data-v-1f55d6c8]{flex-wrap:nowrap;align-items:baseline;gap:12px;min-width:0;display:flex}.waveform-tooltip__series-label[data-v-1f55d6c8]{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.waveform-tooltip__value[data-v-1f55d6c8]{white-space:nowrap;flex:none}.waveform-tooltip__series strong[data-v-1f55d6c8]{font-weight:600}.waveform-tooltip__value[data-v-1f55d6c8]{color:#555}.waveform-tooltip__series small[data-v-1f55d6c8]{color:#667085}.waveform-track__line[data-v-42a3fd47]{fill:none;stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round}.waveform-track__error-bar[data-v-42a3fd47]{fill:none}.waveform-track__point[data-v-42a3fd47],.waveform-track__error-bar[data-v-42a3fd47]{pointer-events:none}.waveform-track{isolation:isolate;pointer-events:none}.waveform-track__y-axis-label-bg{fill:#fff;opacity:.9;pointer-events:none}.waveform-track__y-axis-label{pointer-events:none;font-size:12px;font-weight:500}.waveform-track__grid{pointer-events:none}.waveform-track__grid--major line{stroke:#dfe5ef;stroke-width:1px}.waveform-track__grid--minor line{stroke:#f2f5fa;stroke-width:1px}.waveform-track__plot-frame,.waveform-track__plot-background{pointer-events:none}.waveform-track__watermark{fill:#1677ff1a;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Consolas,Monaco,Courier New,monospace}.waveform-track__overlay{fill:#0000;cursor:crosshair;pointer-events:all;touch-action:none}.waveform-track__no-visible-series{fill:#8c8c8c;pointer-events:none;font:13px sans-serif}.waveform-track__overlay.is-zoomable{cursor:grab}.waveform-track__overlay.is-zoomable:active{cursor:grabbing}.waveform-track__overlay.is-annotating{cursor:crosshair}.waveform-track__overlay.is-presentation{cursor:default;pointer-events:none}.waveform-track__zero-line{fill:none;pointer-events:none}.waveform-track__axis-endpoint{fill:#667085;pointer-events:none;font-size:11px}.waveform-track__axis-exponent{fill:#666;font-family:sans-serif;font-size:10px}.waveform-track__axis path,.waveform-track__axis line{stroke:#1f2937}.waveform-track__axis text{fill:#667085;font-size:11px}.waveform-legend[data-v-2ae12e71]{pointer-events:none;overflow:hidden}.waveform-legend__viewport[data-v-2ae12e71]{box-sizing:border-box;width:100%;height:100%;padding:8px;display:flex;overflow:hidden}.waveform-legend__viewport--top-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-start}.waveform-legend__viewport--top[data-v-2ae12e71]{justify-content:center;align-items:flex-start}.waveform-legend__viewport--top-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-start}.waveform-legend__viewport--right[data-v-2ae12e71]{justify-content:flex-end;align-items:center}.waveform-legend__viewport--bottom-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-end}.waveform-legend__viewport--bottom[data-v-2ae12e71]{justify-content:center;align-items:flex-end}.waveform-legend__viewport--bottom-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-end}.waveform-legend__viewport--left[data-v-2ae12e71]{justify-content:flex-start;align-items:center}.waveform-legend__panel[data-v-2ae12e71]{color:#344054;border:1px solid #d0d5dde6;border-radius:4px;flex:0 auto;gap:5px 12px;max-width:100%;max-height:100%;padding:5px 7px;font:12px/1.35 sans-serif;display:flex;overflow:hidden}.waveform-legend__panel--interactive[data-v-2ae12e71]{pointer-events:auto}.waveform-legend__panel--horizontal[data-v-2ae12e71]{flex-flow:wrap;align-items:center}.waveform-legend__panel--vertical[data-v-2ae12e71]{flex-flow:column;align-items:stretch}.waveform-legend__item[data-v-2ae12e71]{min-width:0;max-width:160px;color:inherit;font:inherit;text-align:left;white-space:nowrap;appearance:none;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:flex}.waveform-legend__item[data-v-2ae12e71]:disabled{opacity:1}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]{cursor:pointer}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]:focus-visible{outline-offset:2px;outline:2px solid #1677ff}.waveform-legend__item.is-hidden[data-v-2ae12e71]{opacity:.45}.waveform-legend__item.is-hidden .waveform-legend__label[data-v-2ae12e71]{text-decoration:line-through}.waveform-legend__swatch[data-v-2ae12e71]{stroke-linecap:round;stroke-linejoin:round;flex:0 0 26px;width:26px;height:16px;overflow:visible}.waveform-legend__label[data-v-2ae12e71]{text-overflow:ellipsis;min-width:0;overflow:hidden}.waveform-track__crosshair[data-v-a6f82099]{pointer-events:none}.waveform-track__crosshair line[data-v-a6f82099]{stroke:#57617b;stroke-width:1px;stroke-dasharray:4 3}.waveform-chart{box-sizing:border-box;color:#475467;background:#fff;border:1px solid #00000014;border-radius:6px;min-width:0;min-height:180px;position:relative;overflow:hidden}.waveform-chart--clean{border-color:#0000}.waveform-chart__pagination{z-index:2;position:absolute;bottom:6px;right:10px}.waveform-chart__title-area{background:#fff;align-items:center;width:100%;min-width:0;padding:0 24px;display:flex;position:relative;overflow:hidden}.waveform-chart__title-measure{visibility:hidden;pointer-events:none;display:block;position:absolute}.waveform-chart__title-visual{flex:none;min-width:0;position:relative;overflow:visible}.waveform-chart__title-text{transform-origin:50%;line-height:1.2;display:block;position:absolute;top:50%;left:50%;overflow:visible}.waveform-chart__pagination .ant-pagination-item,.waveform-chart__pagination .ant-pagination-prev .ant-pagination-item-link,.waveform-chart__pagination .ant-pagination-next .ant-pagination-item-link{background:#fff;border-color:#d9d9d9}.waveform-chart__pagination .ant-pagination-item-active{border-color:#1677ff}.waveform-chart__grid-slot-placeholder{fill:#fafbfc;stroke:#e4e7ec;stroke-dasharray:4 4;pointer-events:none}.waveform-chart__svg{max-width:100%;display:block}.waveform-chart__overlay{fill:#0000;cursor:crosshair;touch-action:none}.waveform-chart__overlay.is-zoomable{cursor:crosshair}.waveform-chart--panning .waveform-chart__overlay.is-zoomable{cursor:grabbing}.waveform-chart__zoom-selection{fill:#1677ff24;stroke:#1677ff;stroke-width:1px;pointer-events:none}.waveform-chart__overlay.is-annotating{cursor:crosshair}.waveform-chart--presentation .waveform-chart__overlay{cursor:default;pointer-events:none}.waveform-chart__label,.waveform-chart__empty{fill:#595959;font-size:12px}
+.waveform-annotation-layer[data-v-7254383e]{pointer-events:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]{pointer-events:auto;cursor:grab;touch-action:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]:active{cursor:grabbing}.waveform-annotation__arrow[data-v-7254383e]{stroke-width:2px;stroke-linecap:round;pointer-events:none}.waveform-annotation__box[data-v-7254383e]{stroke-width:1px;rx:3}.waveform-annotation-layer--interactive .waveform-annotation__box[data-v-7254383e]{pointer-events:auto}.waveform-annotation__text[data-v-7254383e]{pointer-events:none;-webkit-user-select:none;user-select:none}.waveform-annotation-context-menu[data-v-c70c98a1]{z-index:30;background:#fff;border:1px solid #dfe5ef;border-radius:4px;min-width:112px;padding:4px;display:grid;position:absolute;box-shadow:0 4px 14px #10182829}.waveform-annotation-context-menu button[data-v-c70c98a1]{color:#344054;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:3px;padding:7px 10px;font-size:12px}.waveform-annotation-context-menu button[data-v-c70c98a1]:hover{background:#f2f4f7}.waveform-annotation-editor__content[data-v-8ce79dc8]{color:#344054;gap:20px;font-size:13px;display:grid}.waveform-annotation-editor__coordinates[data-v-8ce79dc8]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.waveform-annotation-editor__coordinates span[data-v-8ce79dc8],.waveform-annotation-editor__series[data-v-8ce79dc8]{background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinates span[data-v-8ce79dc8]{color:#667085}.waveform-annotation-editor__coordinate-input[data-v-8ce79dc8]{color:#667085;background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinate-input[data-v-8ce79dc8] .ant-input-number{color:#344054;width:auto;min-width:96px;font-family:SFMono-Regular,Consolas,monospace}.waveform-annotation-editor__coordinate-value[data-v-8ce79dc8]{display:none}.waveform-annotation-editor__coordinate-error[data-v-8ce79dc8]{color:#d92d20;grid-column:1/-1;margin:-12px 0 0;font-size:11px;line-height:1.4}.waveform-annotation-editor__coordinate-hint[data-v-8ce79dc8]{color:#98a2b3;margin:-12px 0 0;font-size:11px;line-height:1.4}.waveform-annotation-editor__coordinates b[data-v-8ce79dc8]{color:#1677ff;font-size:11px}.waveform-annotation-editor__coordinates code[data-v-8ce79dc8]{color:#344054;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;overflow:hidden}.waveform-annotation-editor__series[data-v-8ce79dc8]{gap:10px}.waveform-annotation-editor__series i[data-v-8ce79dc8]{border:1px solid #0000001f;border-radius:2px;flex:0 0 12px;width:12px;height:12px}.waveform-annotation-editor__series-label[data-v-8ce79dc8]{gap:1px;min-width:0;display:grid}.waveform-annotation-editor__series select[data-v-8ce79dc8]{color:#344054;min-width:0;max-width:190px;font:inherit;background:#fff;border:1px solid #d0d5dd;border-radius:5px;margin-left:auto;padding:5px 7px}.waveform-annotation-editor__series small[data-v-8ce79dc8]{color:#667085;font-size:10px}.waveform-annotation-editor__series b[data-v-8ce79dc8]{color:#344054;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.waveform-annotation-editor__series code[data-v-8ce79dc8]{color:#667085;margin-left:auto;font-size:11px}.waveform-annotation-editor__field[data-v-8ce79dc8],.waveform-annotation-editor__color-field[data-v-8ce79dc8]{gap:4px;display:grid}.waveform-annotation-editor__label-row[data-v-8ce79dc8]{justify-content:space-between;align-items:center;gap:8px;display:flex}.waveform-annotation-editor__label-row b[data-v-8ce79dc8],.waveform-annotation-editor__colors legend[data-v-8ce79dc8]{color:#344054;font-size:12px;font-weight:600}.waveform-annotation-editor__label-row small[data-v-8ce79dc8]{color:#98a2b3;font-size:11px}.waveform-annotation-editor textarea[data-v-8ce79dc8]{box-sizing:border-box;color:#1d2939;width:100%;min-height:92px;font:inherit;resize:vertical;background:#fff;border:1px solid #d0d5dd;border-radius:7px;padding:10px 11px;line-height:1.5}.waveform-annotation-editor textarea[data-v-8ce79dc8]:focus{border-color:#1677ff;outline:3px solid #1677ff24}.waveform-annotation-editor__colors[data-v-8ce79dc8]{border:0;border-top:1px solid #eaecf0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;margin:0;padding:14px 0 0;display:grid}.waveform-annotation-editor__colors legend[data-v-8ce79dc8]{grid-column:1/-1;padding:0}.waveform-annotation-editor__color-field[data-v-8ce79dc8]{color:#667085;text-align:left;place-items:stretch stretch;min-width:0;font-size:11px}.waveform-annotation-editor__color-field[data-v-8ce79dc8] .vc-color-wrap{border:1px solid #cfd5df;border-radius:6px;width:100%;height:34px;margin-right:0;box-shadow:inset 0 0 0 1px #ffffff61}.waveform-annotation-editor__color-field[data-v-8ce79dc8] .vc-color-wrap:hover{border-color:#98a2b3;box-shadow:0 0 0 3px #1677ff1f}@media (width<=420px){.waveform-annotation-editor__content[data-v-8ce79dc8]{gap:16px}.waveform-annotation-editor__coordinates[data-v-8ce79dc8]{grid-template-columns:1fr}}.waveform-tooltip[data-v-1f55d6c8]{box-sizing:border-box;z-index:2;color:#505050;pointer-events:none;background:#fff;border:1px solid #e3e7eb;border-radius:4px;gap:2px;width:max-content;max-width:min(560px,100% - 16px);padding:9px 12px;font:14px/1.35 Arial,sans-serif;display:grid;position:absolute;box-shadow:0 3px 10px #10182826}.waveform-tooltip__series[data-v-1f55d6c8]{grid-template-columns:8px minmax(0,1fr);align-items:start;gap:6px;display:grid}.waveform-tooltip__series i[data-v-1f55d6c8]{border-radius:50%;flex:none;width:8px;height:8px;margin-top:4px}.waveform-tooltip__series-content[data-v-1f55d6c8]{flex-wrap:nowrap;align-items:baseline;gap:12px;min-width:0;display:flex}.waveform-tooltip__series-label[data-v-1f55d6c8]{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.waveform-tooltip__value[data-v-1f55d6c8]{white-space:nowrap;flex:none}.waveform-tooltip__series strong[data-v-1f55d6c8]{font-weight:600}.waveform-tooltip__value[data-v-1f55d6c8]{color:#555}.waveform-tooltip__series small[data-v-1f55d6c8]{color:#667085}.waveform-track__line[data-v-42a3fd47]{fill:none;stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round}.waveform-track__error-bar[data-v-42a3fd47]{fill:none}.waveform-track__point[data-v-42a3fd47],.waveform-track__error-bar[data-v-42a3fd47]{pointer-events:none}.waveform-track{isolation:isolate;pointer-events:none}.waveform-track__y-axis-label-bg{fill:#fff;opacity:.9;pointer-events:none}.waveform-track__y-axis-label{pointer-events:none;font-size:12px;font-weight:500}.waveform-track__grid{pointer-events:none}.waveform-track__grid--major line{stroke:#dfe5ef;stroke-width:1px}.waveform-track__grid--minor line{stroke:#f2f5fa;stroke-width:1px}.waveform-track__plot-frame,.waveform-track__plot-background{pointer-events:none}.waveform-track__watermark{fill:#1677ff1a;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Consolas,Monaco,Courier New,monospace}.waveform-track__overlay{fill:#0000;cursor:crosshair;pointer-events:all;touch-action:none}.waveform-track__no-visible-series{fill:#8c8c8c;pointer-events:none;font:13px sans-serif}.waveform-track__overlay.is-zoomable{cursor:grab}.waveform-track__overlay.is-zoomable:active{cursor:grabbing}.waveform-track__overlay.is-annotating{cursor:crosshair}.waveform-track__overlay.is-presentation{cursor:default;pointer-events:none}.waveform-track__zero-line{fill:none;pointer-events:none}.waveform-track__axis-endpoint{fill:#667085;pointer-events:none;font-size:11px}.waveform-track__axis-exponent{fill:#666;font-family:sans-serif;font-size:10px}.waveform-track__axis path,.waveform-track__axis line{stroke:#1f2937}.waveform-track__axis text{fill:#667085;font-size:11px}.waveform-legend[data-v-2ae12e71]{pointer-events:none;overflow:hidden}.waveform-legend__viewport[data-v-2ae12e71]{box-sizing:border-box;width:100%;height:100%;padding:8px;display:flex;overflow:hidden}.waveform-legend__viewport--top-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-start}.waveform-legend__viewport--top[data-v-2ae12e71]{justify-content:center;align-items:flex-start}.waveform-legend__viewport--top-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-start}.waveform-legend__viewport--right[data-v-2ae12e71]{justify-content:flex-end;align-items:center}.waveform-legend__viewport--bottom-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-end}.waveform-legend__viewport--bottom[data-v-2ae12e71]{justify-content:center;align-items:flex-end}.waveform-legend__viewport--bottom-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-end}.waveform-legend__viewport--left[data-v-2ae12e71]{justify-content:flex-start;align-items:center}.waveform-legend__panel[data-v-2ae12e71]{color:#344054;border:1px solid #d0d5dde6;border-radius:4px;flex:0 auto;gap:5px 12px;max-width:100%;max-height:100%;padding:5px 7px;font:12px/1.35 sans-serif;display:flex;overflow:hidden}.waveform-legend__panel--interactive[data-v-2ae12e71]{pointer-events:auto}.waveform-legend__panel--horizontal[data-v-2ae12e71]{flex-flow:wrap;align-items:center}.waveform-legend__panel--vertical[data-v-2ae12e71]{flex-flow:column;align-items:stretch}.waveform-legend__item[data-v-2ae12e71]{min-width:0;max-width:160px;color:inherit;font:inherit;text-align:left;white-space:nowrap;appearance:none;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:flex}.waveform-legend__item[data-v-2ae12e71]:disabled{opacity:1}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]{cursor:pointer}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]:focus-visible{outline-offset:2px;outline:2px solid #1677ff}.waveform-legend__item.is-hidden[data-v-2ae12e71]{opacity:.45}.waveform-legend__item.is-hidden .waveform-legend__label[data-v-2ae12e71]{text-decoration:line-through}.waveform-legend__swatch[data-v-2ae12e71]{stroke-linecap:round;stroke-linejoin:round;flex:0 0 26px;width:26px;height:16px;overflow:visible}.waveform-legend__label[data-v-2ae12e71]{text-overflow:ellipsis;min-width:0;overflow:hidden}.waveform-track__crosshair[data-v-a6f82099]{pointer-events:none}.waveform-track__crosshair line[data-v-a6f82099]{stroke:#57617b;stroke-width:1px;stroke-dasharray:4 3}.waveform-chart{box-sizing:border-box;color:#475467;background:#fff;border:1px solid #00000014;border-radius:6px;min-width:0;min-height:180px;position:relative;overflow:hidden}.waveform-chart--clean{border-color:#0000}.waveform-chart__pagination{z-index:2;position:absolute;bottom:6px;right:10px}.waveform-chart__title-area{background:#fff;align-items:center;width:100%;min-width:0;padding:0 24px;display:flex;position:relative;overflow:hidden}.waveform-chart__title-measure{visibility:hidden;pointer-events:none;display:block;position:absolute}.waveform-chart__title-visual{flex:none;min-width:0;position:relative;overflow:visible}.waveform-chart__title-text{transform-origin:50%;line-height:1.2;display:block;position:absolute;top:50%;left:50%;overflow:visible}.waveform-chart__pagination .ant-pagination-item,.waveform-chart__pagination .ant-pagination-prev .ant-pagination-item-link,.waveform-chart__pagination .ant-pagination-next .ant-pagination-item-link{background:#fff;border-color:#d9d9d9}.waveform-chart__pagination .ant-pagination-item-active{border-color:#1677ff}.waveform-chart__grid-slot-placeholder{fill:#fafbfc;stroke:#e4e7ec;stroke-dasharray:4 4;pointer-events:none}.waveform-chart__svg{max-width:100%;display:block}.waveform-chart__overlay{fill:#0000;cursor:crosshair;touch-action:none}.waveform-chart__overlay.is-zoomable{cursor:crosshair}.waveform-chart--panning .waveform-chart__overlay.is-zoomable{cursor:grabbing}.waveform-chart__zoom-selection{fill:#1677ff24;stroke:#1677ff;stroke-width:1px;pointer-events:none}.waveform-chart__overlay.is-annotating{cursor:crosshair}.waveform-chart--presentation .waveform-chart__overlay{cursor:default;pointer-events:none}.waveform-chart__label,.waveform-chart__empty{fill:#595959;font-size:12px}
 /*$vite$:1*/

package/dist/types/components/annotation/WaveformAnnotationEditor.vue.d.ts

@@ -8,17 +8,21 @@ interface Props {
     series?: AnnotationSeriesInfo;
     seriesOptions?: AnnotationSeriesCandidate[];
     timeUnit?: TimeUnit;
+    timeError?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;
     confirm: (annotation: WaveformAnnotation) => any;
     "series-change": (seriesId: string) => any;
+    "time-change": (displayValue: string) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onConfirm?: ((annotation: WaveformAnnotation) => any) | undefined;
     "onSeries-change"?: ((seriesId: string) => any) | undefined;
+    "onTime-change"?: ((displayValue: string) => any) | undefined;
 }>, {
     timeUnit: TimeUnit;
+    timeError: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/annotation/useWaveformChartAnnotations.d.ts

@@ -1,5 +1,5 @@
 import { type ScaleLinear } from 'd3';
-import type { ComputedRef, Ref } from 'vue';
+import { type ComputedRef, type Ref } from 'vue';
 import type { WaveformAnnotation, WaveformInteractionMode } from '../data/types';
 import type { DisplaySeries, TrackLayout } from '../core/types';
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from '../core/waveformChartTypes';
@@ -29,6 +29,8 @@ interface AnnotationContext {
 export declare function useWaveformChartAnnotations(context: AnnotationContext): {
     toggleSeriesVisibility: (seriesId: string) => void;
     changeDraftSeries: (seriesId: string) => void;
+    changeDraftTime: (displayValue: string) => void;
+    timeError: Ref<string, string>;
     cancelAnnotation: () => void;
     resolveTrackAtPointer: (pointerX: number, pointerY: number, trackIndex?: number) => TrackLayout | undefined;
     handleAnnotationClick: (event: MouseEvent, trackIndex?: number) => void;

package/dist/types/components/core/constants.d.ts

@@ -97,7 +97,9 @@ export declare const TITLE_CHAR_WIDTH_RATIO = 0.62;
  */
 export declare const TITLE_LINE_HEIGHT = 1.2;
 /**
- * 通道默认颜色列表
+ * 多系列波形的默认颜色列表。
+ *
+ * 颜色保持较深并具备足够辨识度，避免大量系列同时绘制时使用浅色导致线条难以观察。
  */
 export declare const channelColors: string[];
 /**

package/dist/types/components/core/useWaveformChartController.d.ts

@@ -231,6 +231,8 @@ export declare function useWaveformChartController(props: ResolvedWaveformChartP
     requestViewportReset: (event: MouseEvent) => void;
     toggleSeriesVisibility: (seriesId: string) => void;
     changeDraftSeries: (seriesId: string) => void;
+    changeDraftTime: (displayValue: string) => void;
+    timeError: string;
     cancelAnnotation: () => void;
     resolveTrackAtPointer: (pointerX: number, pointerY: number, trackIndex?: number) => import("./types").TrackLayout | undefined;
     handleAnnotationClick: (event: MouseEvent, trackIndex?: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",

package/src/App.test.ts

@@ -321,8 +321,9 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
     const styleSelect = frameControls.findAllComponents(Select)[0]
 
     expect(colorPickers).toHaveLength(2)
-    expect(widthInput).toBeDefined()
-    expect(styleSelect).toBeDefined()
+
+    const initialFrames = wrapper.findAll('.waveform-chart__plot-frame')
+    expect(initialFrames.length > 1 && initialFrames.every((frame) => frame.attributes('stroke-width') === '2')).toBe(true)
 
     colorPickers[0].vm.$emit('update:pureColor', 'rgba(220, 38, 38, 0.8)')
     colorPickers[1].vm.$emit('update:pureColor', 'rgba(14, 165, 233, 0.25)')

package/src/App.vue

@@ -32,7 +32,7 @@ const overlayMode = ref<WaveformOverlayMode>('single-axis')
 const rowCount = ref(4)
 const columnCount = ref(1)
 const frameBorderColor = ref('#1f2937')
-const frameBorderWidth = ref(1)
+const frameBorderWidth = ref(2)
 const frameBorderStyle = ref<NonNullable<WaveformFrameStyle['borderStyle']>>('solid')
 const frameBackgroundColor = ref('rgba(255, 255, 255, 0)')
 const frameWatermarkVisible = ref(true)

package/src/components/WaveformChartView.vue

@@ -87,9 +87,11 @@ const {
   contextMenu,
   editorSeries,
   editorSeriesOptions,
+  timeError,
   confirmAnnotation,
   cancelAnnotation,
   changeDraftSeries,
+  changeDraftTime,
   editContextAnnotation,
   deleteContextAnnotation,
   chartHeight,
@@ -98,6 +100,11 @@ const {
   setTitleMeasureElement,
   setSharedOverlayElement,
 } = toRefs(props.controller)
+
+function handleChartPointerLeave() {
+  pointerInsideChart.value = false
+  handlePointerLeave.value()
+}
 </script>
 
 <template>
@@ -123,7 +130,7 @@ const {
     :data-plot-margin-bottom="resolvedPlotMargin.bottom"
     :data-title-area-height="titleAreaHeight"
     @pointerenter="pointerInsideChart = true"
-    @pointerleave="pointerInsideChart = false"
+    @pointerleave="handleChartPointerLeave"
     @contextmenu.capture="handleNativeContextMenu"
   >
     <div
@@ -332,9 +339,11 @@ const {
       :series="editorSeries"
       :series-options="editorSeriesOptions"
       :time-unit="timeUnit"
+      :time-error="timeError"
       @confirm="confirmAnnotation"
       @cancel="cancelAnnotation"
       @series-change="changeDraftSeries"
+      @time-change="changeDraftTime"
     />
 
     <WaveformAnnotationContextMenu

package/src/components/annotation/WaveformAnnotationEditor.css

@@ -1,63 +1,8 @@
-.waveform-annotation-editor {
-  position: absolute;
-  inset: 0;
-  z-index: 40;
-  display: grid;
-  place-items: center;
-  padding: 20px;
-  background: rgb(16 24 40 / 32%);
-  animation: waveform-annotation-editor-fade-in 160ms ease-out;
-}
-.waveform-annotation-editor__panel {
+.waveform-annotation-editor__content {
   display: grid;
   gap: 20px;
-  width: min(440px, 100%);
-  max-height: 100%;
-  overflow-y: auto;
-  padding: 22px;
   color: #344054;
   font-size: 13px;
-  background: #fff;
-  border: 1px solid #e4e7ec;
-  border-radius: 12px;
-  box-shadow: 0 20px 50px rgb(16 24 40 / 22%);
-  animation: waveform-annotation-editor-rise-in 180ms ease-out;
-}
-.waveform-annotation-editor__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-.waveform-annotation-editor__header h2 {
-  margin: 0;
-  color: #101828;
-  font-size: 18px;
-  line-height: 1.3;
-}
-.waveform-annotation-editor__header p {
-  margin: 5px 0 0;
-  color: #667085;
-  font-size: 12px;
-}
-.waveform-annotation-editor__close {
-  display: inline-grid;
-  flex: 0 0 30px;
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  place-items: center;
-  color: #667085;
-  font-size: 22px;
-  line-height: 1;
-  background: transparent;
-  border: 0;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.waveform-annotation-editor__close:hover {
-  color: #101828;
-  background: #f2f4f7;
 }
 .waveform-annotation-editor__coordinates {
   display: grid;
@@ -78,6 +23,39 @@
 .waveform-annotation-editor__coordinates span {
   color: #667085;
 }
+.waveform-annotation-editor__coordinate-input {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 10px;
+  color: #667085;
+  background: #f8fafc;
+  border: 1px solid #eaecf0;
+  border-radius: 7px;
+}
+.waveform-annotation-editor__coordinate-input :deep(.ant-input-number) {
+  width: auto;
+  min-width: 96px;
+  color: #344054;
+  font-family: 'SFMono-Regular', Consolas, monospace;
+}
+.waveform-annotation-editor__coordinate-value {
+  display: none;
+}
+.waveform-annotation-editor__coordinate-error {
+  grid-column: 1 / -1;
+  margin: -12px 0 0;
+  color: #d92d20;
+  font-size: 11px;
+  line-height: 1.4;
+}
+.waveform-annotation-editor__coordinate-hint {
+  margin: -12px 0 0;
+  color: #98a2b3;
+  font-size: 11px;
+  line-height: 1.4;
+}
 .waveform-annotation-editor__coordinates b {
   color: #1677ff;
   font-size: 11px;
@@ -205,56 +183,9 @@
   border-color: #98a2b3;
   box-shadow: 0 0 0 3px rgb(22 119 255 / 12%);
 }
-.waveform-annotation-editor__actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid #eaecf0;
-}
-.waveform-annotation-editor__actions button {
-  height: 34px;
-  padding: 0 12px;
-  color: #475467;
-  background: #fff;
-  border: 1px solid #d0d5dd;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.waveform-annotation-editor__actions button.is-primary {
-  color: #fff;
-  background: #1677ff;
-  border-color: #1677ff;
-}
-.waveform-annotation-editor__actions button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-@keyframes waveform-annotation-editor-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes waveform-annotation-editor-rise-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
 @media (max-width: 420px) {
-  .waveform-annotation-editor {
-    padding: 12px;
-  }
-  .waveform-annotation-editor__panel {
+  .waveform-annotation-editor__content {
     gap: 16px;
-    padding: 18px;
   }
   .waveform-annotation-editor__coordinates {
     grid-template-columns: 1fr;

package/src/components/annotation/WaveformAnnotationEditor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
+import { InputNumber, Modal } from 'ant-design-vue'
 import { ColorPicker } from 'vue3-colorpicker'
 import 'vue3-colorpicker/style.css'
 
@@ -15,24 +16,44 @@ interface Props {
   series?: AnnotationSeriesInfo
   seriesOptions?: AnnotationSeriesCandidate[]
   timeUnit?: TimeUnit
+  timeError?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   timeUnit: 'ms',
+  timeError: '',
 })
 const emit = defineEmits<{
   (event: 'confirm', annotation: WaveformAnnotation): void
   (event: 'cancel'): void
   (event: 'series-change', seriesId: string): void
+  (event: 'time-change', displayValue: string): void
 }>()
 
 const textarea = ref<HTMLTextAreaElement>()
 const dialogTitleId = useWaveformInstanceId('waveform-annotation-editor-title')
 const text = ref('')
+const timeInput = ref('')
+const timeValidationRequested = ref(false)
 const borderColor = ref('')
 const textColor = ref('')
 const backgroundColor = ref('')
-const canConfirm = computed(() => text.value.trim().length > 0)
+const inputTimeError = computed(() => {
+  if (!timeValidationRequested.value) return ''
+  if (!timeInput.value.trim() || !Number.isFinite(Number(timeInput.value)))
+    return '请输入有效的时间'
+  return ''
+})
+const timeErrorMessage = computed(() =>
+  timeValidationRequested.value ? inputTimeError.value || props.timeError || '' : '',
+)
+const canConfirm = computed(
+  () =>
+    text.value.trim().length > 0 &&
+    timeInput.value.trim().length > 0 &&
+    Number.isFinite(Number(timeInput.value)) &&
+    !timeErrorMessage.value,
+)
 const characterCount = computed(() => text.value.length)
 const selectedSeries = computed(() => {
   const option = props.seriesOptions?.find(
@@ -46,15 +67,30 @@ const selectedSeries = computed(() => {
 function hydrate() {
   const style = resolveAnnotationStyle(props.annotation.style)
   text.value = props.annotation.text
+  timeInput.value = formatAnnotationTime(props.annotation.x, props.timeUnit)
+  timeValidationRequested.value = false
   borderColor.value = style.borderColor
   textColor.value = style.textColor
   backgroundColor.value = style.backgroundColor
   void nextTick(() => textarea.value?.focus())
 }
 
-watch(() => props.annotation, hydrate, { immediate: true })
+watch(() => props.annotation.id, hydrate, { immediate: true })
+
+function handleTimeInput(value: number | string | null) {
+  const nextValue = value === null || value === undefined ? '' : String(value)
+  timeInput.value = nextValue
+  timeValidationRequested.value = false
+}
+
+function commitTimeInput() {
+  timeValidationRequested.value = true
+  emit('time-change', timeInput.value)
+}
 
-function confirm() {
+async function confirm() {
+  commitTimeInput()
+  await nextTick()
   if (!canConfirm.value) return
   emit('confirm', {
     ...props.annotation,
@@ -82,40 +118,60 @@ function handleSeriesChange(event: Event) {
 </script>
 
 <template>
-  <div
-    class="waveform-annotation-editor"
-    role="dialog"
-    aria-modal="true"
-    :aria-labelledby="dialogTitleId"
-    @click.self="emit('cancel')"
+  <Modal
+    :visible="true"
+    :width="440"
+    :mask-closable="true"
+    :keyboard="true"
+    cancel-text="取消"
+    ok-text="保存标注"
+    :ok-button-props="{ disabled: !canConfirm }"
+    wrap-class-name="waveform-annotation-editor"
+    @cancel="emit('cancel')"
+    @ok="confirm"
   >
-    <section class="waveform-annotation-editor__panel">
-      <header class="waveform-annotation-editor__header">
-        <div>
-          <h2 :id="dialogTitleId">
-            {{ props.mode === 'add' ? '添加标注' : '编辑标注' }}
-          </h2>
-        </div>
-        <button
-          type="button"
-          class="waveform-annotation-editor__close"
-          aria-label="关闭标注编辑器"
-          title="关闭"
-          @click="emit('cancel')"
-        >
-          ×
-        </button>
-      </header>
+    <template #title>
+      <span :id="dialogTitleId">{{ props.mode === 'add' ? '添加标注' : '编辑标注' }}</span>
+    </template>
 
+    <div class="waveform-annotation-editor__content">
       <div class="waveform-annotation-editor__coordinates" aria-label="标注坐标">
-        <span
-          ><b>X ({{ props.timeUnit }})</b
-          ><code>{{ formatAnnotationTime(props.annotation.x, props.timeUnit) }}</code></span
+        <label
+          class="waveform-annotation-editor__coordinate-input"
+          :aria-invalid="Boolean(timeErrorMessage)"
+        >
+          <b>X</b>
+          <InputNumber
+            :value="timeInput === '' ? undefined : Number(timeInput)"
+            :controls="true"
+            :step="0.001"
+            :keyboard="true"
+            :status="timeErrorMessage ? 'error' : undefined"
+            aria-label="标注横轴时间"
+            :aria-invalid="Boolean(timeErrorMessage)"
+            :aria-describedby="timeErrorMessage ? `${dialogTitleId}-time-error` : undefined"
+            @blur="commitTimeInput"
+            @update:value="handleTimeInput"
+          />
+          <code class="waveform-annotation-editor__coordinate-value" aria-hidden="true">{{
+            timeInput
+          }}</code>
+        </label>
+        <p
+          v-if="timeErrorMessage"
+          :id="`${dialogTitleId}-time-error`"
+          class="waveform-annotation-editor__coordinate-error"
+          role="alert"
         >
+          {{ timeErrorMessage }}
+        </p>
         <span
           ><b>Y</b><code>{{ formatPlainNumber(props.annotation.y) }}</code></span
         >
       </div>
+      <p class="waveform-annotation-editor__coordinate-hint" role="note">
+        修改 X 轴后失焦时会自动吸附最近的采样点
+      </p>
 
       <label
         v-if="selectedSeries"
@@ -200,14 +256,8 @@ function handleSeriesChange(event: Event) {
         </label>
       </fieldset>
 
-      <footer class="waveform-annotation-editor__actions">
-        <button type="button" @click="emit('cancel')">取消</button>
-        <button type="button" class="is-primary" :disabled="!canConfirm" @click="confirm">
-          保存标注
-        </button>
-      </footer>
-    </section>
-  </div>
+    </div>
+  </Modal>
 </template>
 
 <style scoped src="./WaveformAnnotationEditor.css"></style>