mirror of
https://github.com/varkor/quiver.git
synced 2024-10-26 07:09:37 +03:00
wip
This commit is contained in:
parent
08c1a70ff5
commit
df075b74a8
17
src/main.css
17
src/main.css
@ -251,7 +251,14 @@ body {
|
||||
|
||||
.edge .label {
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edge .label.near-start {
|
||||
left: 25%; right: auto;
|
||||
}
|
||||
|
||||
.edge .label.near-end {
|
||||
left: auto; right: 25%;
|
||||
}
|
||||
|
||||
.edge .handle {
|
||||
@ -368,6 +375,14 @@ body {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.panel .thin {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
.panel .thin input[type="radio"] {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.panel .vertical {
|
||||
display: inline-block;
|
||||
width: calc(100% - (20% + 4px) * 2);
|
||||
|
54
src/ui.js
54
src/ui.js
@ -2044,6 +2044,16 @@ class History {
|
||||
}
|
||||
ui.panel.update(ui);
|
||||
break;
|
||||
case "label-placement":
|
||||
for (const placement of action.placements) {
|
||||
if (placement.edge.options.label_placement != placement[to]) {
|
||||
placement.edge.element.classList.remove(placement.edge.options.label_placement);
|
||||
placement.edge.options.label_placement = placement[to];
|
||||
placement.edge.element.classList.add(placement.edge.options.label_placement);
|
||||
}
|
||||
}
|
||||
ui.panel.update(ui);
|
||||
break;
|
||||
case "offset":
|
||||
const edges = new Set();
|
||||
for (const offset of action.offsets) {
|
||||
@ -2141,9 +2151,10 @@ class Panel {
|
||||
this.element.appendChild(local.element);
|
||||
|
||||
// The label.
|
||||
const labels = new DOM.Element("div");
|
||||
const label_input = new DOM.Element("input", { type: "text", disabled: true });
|
||||
const label = new DOM.Element("label").add("Label: ").add(label_input);
|
||||
local.add(label);
|
||||
local.add(labels.add(label));
|
||||
|
||||
// Handle label interaction: update the labels of the selected cells when
|
||||
// the input field is modified.
|
||||
@ -2192,6 +2203,34 @@ class Panel {
|
||||
ui.history.permanentise();
|
||||
});
|
||||
|
||||
// The label placement options.
|
||||
this.create_option_list(
|
||||
ui,
|
||||
local,
|
||||
[["near-start",], ["middle",], ["near-end",]],
|
||||
"label-placement",
|
||||
["thin"],
|
||||
false, // `disabled`
|
||||
(edges, value) => {
|
||||
ui.history.add(ui, [{
|
||||
kind: "label-placement",
|
||||
placements: Array.from(ui.selection)
|
||||
.filter(cell => cell.is_edge())
|
||||
.map((edge) => ({
|
||||
edge,
|
||||
from: edge.options.label_placement,
|
||||
to: value,
|
||||
})),
|
||||
}]);
|
||||
for (const edge of edges) {
|
||||
const label = edge.element.querySelector(".label:not(.buffer)");
|
||||
label.classList.remove(edge.options.label_placement);
|
||||
label.classList.add(value);
|
||||
}
|
||||
edges.forEach(edge => edge.options.label_placement = value);
|
||||
},
|
||||
);
|
||||
|
||||
// The label alignment options.
|
||||
|
||||
// The radius of the box representing the text along the arrow.
|
||||
@ -2563,7 +2602,7 @@ class Panel {
|
||||
classes,
|
||||
disabled,
|
||||
on_check,
|
||||
properties,
|
||||
properties = () => ({ edge: { length: 0, options: Edge.default_options() } }),
|
||||
augment_svg = () => [],
|
||||
) {
|
||||
const options_list = new DOM.Element("div", { class: `options` });
|
||||
@ -2692,7 +2731,9 @@ class Panel {
|
||||
/// Update the panel state (i.e. enable/disable fields as relevant).
|
||||
update(ui) {
|
||||
const input = this.element.querySelector('label input[type="text"]');
|
||||
const label_alignments = this.element.querySelectorAll('input[name="label-alignment"]');
|
||||
const label_options = this.element.querySelectorAll(
|
||||
'input[name="label-alignment"], input[name="label-placement"]'
|
||||
);
|
||||
const slider = this.element.querySelector('input[type="range"]');
|
||||
|
||||
// Modifying cells is not permitted when the export pane is visible.
|
||||
@ -2715,8 +2756,8 @@ class Panel {
|
||||
// // Enable the label input if at least one cell has been selected.
|
||||
input.disabled = ui.selection.size === 0;
|
||||
|
||||
// Label alignment options are always enabled.
|
||||
for (const option of label_alignments) {
|
||||
// Label alignment/placement options are always enabled.
|
||||
for (const option of label_options) {
|
||||
option.disabled = false;
|
||||
}
|
||||
|
||||
@ -2789,6 +2830,8 @@ class Panel {
|
||||
break;
|
||||
case "{angle}":
|
||||
const angle = value !== null ? value : 0;
|
||||
const label_alignments
|
||||
= this.element.querySelectorAll('input[name="label-alignment"]');
|
||||
for (const option of label_alignments) {
|
||||
option.style.transform = `rotate(${
|
||||
Math.round(2 * angle / Math.PI) * 90
|
||||
@ -3114,6 +3157,7 @@ class Edge extends Cell {
|
||||
static default_options(override_properties, override_style, level = 1) {
|
||||
return Object.assign({
|
||||
label_alignment: "left",
|
||||
label_placement: "middle",
|
||||
offset: 0,
|
||||
style: Object.assign({
|
||||
name: "arrow",
|
||||
|
Loading…
Reference in New Issue
Block a user