Full document, spreadsheet, slideshow, and diagram tooling
Merge pull request 'fix(diagrams): merge style and properties into single panel' (#224) from fix/diagrams-polish-2 into main
+21
-35
+2
CHANGELOG.md
+2
CHANGELOG.md
···
8
8
## [0.22.4] — 2026-04-04
9
9
10
10
### Fixed
11
+
- Fix diagrams saving as spreadsheet when reopened (#353)
12
+
- Fix inline text editing not working in diagram mode (#352)
11
13
- Inline text editing in diagrams survives re-renders (textarea no longer destroyed) (#352)
12
14
- Diagrams now reopen correctly instead of loading as spreadsheets (#353)
13
15
- Landing page routing supports all document types (doc, sheet, form, slide, diagram)
-13
src/css/app.css
-13
src/css/app.css
···
8118
8118
}
8119
8119
8120
8120
/* Properties panel */
8121
-
.diagrams-props {
8122
-
position: absolute;
8123
-
top: var(--space-sm);
8124
-
right: var(--space-sm);
8125
-
width: 200px;
8126
-
background: var(--color-surface);
8127
-
border: 1px solid var(--color-border);
8128
-
border-radius: var(--radius-md);
8129
-
box-shadow: var(--shadow-md);
8130
-
padding: var(--space-sm);
8131
-
z-index: 10;
8132
-
}
8133
-
8134
8121
.diagrams-props-title {
8135
8122
font-size: 0.7rem;
8136
8123
text-transform: uppercase;
+11
-16
src/diagrams/index.html
+11
-16
src/diagrams/index.html
···
113
113
</svg>
114
114
</div>
115
115
116
-
<!-- Style panel (right sidebar, shown when element selected) -->
116
+
<!-- Unified style & properties panel (right sidebar) -->
117
117
<div class="diagrams-style-panel" id="style-panel" style="display:none">
118
-
<h3 class="diagrams-props-title">Style</h3>
118
+
<h3 class="diagrams-props-title">Properties</h3>
119
+
<!-- Shape properties (single selection only) -->
120
+
<div class="diagrams-style-row diagrams-props-section" id="props-section" style="display:none">
121
+
<label>Label <input type="text" class="diagrams-prop-input" id="prop-label" placeholder="Label"></label>
122
+
</div>
123
+
<div class="diagrams-style-row diagrams-props-section" id="props-dimensions" style="display:none">
124
+
<label>W <input type="number" class="diagrams-prop-input" id="prop-width" min="10" style="width:64px"></label>
125
+
<label>H <input type="number" class="diagrams-prop-input" id="prop-height" min="10" style="width:64px"></label>
126
+
</div>
127
+
<!-- Visual style -->
119
128
<div class="diagrams-style-row">
120
129
<label>Fill <input type="color" id="style-fill" value="#ffffff"></label>
121
130
<label>Stroke <input type="color" id="style-stroke" value="#000000"></label>
···
156
165
<input type="number" id="style-font-size" value="14" min="8" max="72" step="2">
157
166
</label>
158
167
</div>
159
-
</div>
160
-
161
-
<!-- Properties panel (right sidebar, shown when single element selected) -->
162
-
<div class="diagrams-props" id="props-panel" style="display:none">
163
-
<h3 class="diagrams-props-title">Properties</h3>
164
-
<label class="diagrams-prop-label">Label
165
-
<input type="text" class="diagrams-prop-input" id="prop-label" placeholder="Label">
166
-
</label>
167
-
<label class="diagrams-prop-label">Width
168
-
<input type="number" class="diagrams-prop-input" id="prop-width" min="10">
169
-
</label>
170
-
<label class="diagrams-prop-label">Height
171
-
<input type="number" class="diagrams-prop-input" id="prop-height" min="10">
172
-
</label>
173
168
</div>
174
169
</main>
175
170
</div>
+8
-6
src/diagrams/main.ts
+8
-6
src/diagrams/main.ts
···
33
33
const canvas = $('diagram-canvas') as unknown as SVGSVGElement;
34
34
const layer = $('diagram-layer') as unknown as SVGGElement;
35
35
const zoomLabel = $('zoom-label');
36
-
const propsPanel = $('props-panel');
36
+
const propsSection = $('props-section');
37
+
const propsDimensions = $('props-dimensions');
37
38
const propLabel = $('prop-label') as HTMLInputElement;
38
39
const propWidth = $('prop-width') as HTMLInputElement;
39
40
const propHeight = $('prop-height') as HTMLInputElement;
···
663
664
664
665
function updateProps() {
665
666
if (selectedShapeIds.size !== 1) {
666
-
propsPanel.style.display = 'none';
667
+
propsSection.style.display = 'none';
668
+
propsDimensions.style.display = 'none';
667
669
return;
668
670
}
669
671
const shape = wb.shapes.get([...selectedShapeIds][0]);
670
-
if (!shape) { propsPanel.style.display = 'none'; return; }
671
-
propsPanel.style.display = '';
672
+
if (!shape) { propsSection.style.display = 'none'; propsDimensions.style.display = 'none'; return; }
673
+
propsSection.style.display = '';
674
+
propsDimensions.style.display = '';
672
675
propLabel.value = shape.label || '';
673
676
propWidth.value = String(shape.width);
674
677
propHeight.value = String(shape.height);
···
1714
1717
const topbar = document.querySelector('.app-topbar') as HTMLElement;
1715
1718
if (toolbar) toolbar.style.display = focusModeActive ? 'none' : '';
1716
1719
if (topbar) topbar.style.display = focusModeActive ? 'none' : '';
1717
-
// Also hide any panels
1720
+
// Also hide style panel
1718
1721
stylePanel.style.display = 'none';
1719
-
propsPanel.style.display = 'none';
1720
1722
}
1721
1723
1722
1724
// --- Edge Scrolling ---