react-beauti-graph 1.3.0 → 1.3.1

package/dist/style.css

@@ -1,356 +1,380 @@
-/* react-beauti-graph styles: everything is scoped under .rbg-graph */
-
-.rbg-graph {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-  min-height: 0;
-}
-
-/* Top controls row text size comes from create_graph options (topControlsFontSize), set as a CSS variable.
-   Spacing is in em, so it grows with the text size; the row wraps when it does not fit. */
-.rbg-graph .controls {
-  font-size: var(--rbg-top-controls-font-size, 14px);
-  padding: 0.7em 1em;
-  background: #fafafa;
-  border-bottom: 1px solid #ddd;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5em 0.8em;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 10;
-}
-
-/* A label with its box (and the Track node switch): kept on one line */
-.rbg-graph .control-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em 0.8em;
-  white-space: nowrap;
-}
-
-.rbg-graph .controls label {
-  color: #0066cc;
-  white-space: nowrap;
-}
-
-.rbg-graph .help {
-  position: relative;
-  display: inline-flex;
-}
-
-.rbg-graph .help-icon {
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: 1px solid #0066cc;
-  border-radius: 50%;
-  background: #fff;
-  color: #0066cc;
-  font-size: 13px;
-  font-weight: bold;
-  line-height: 1;
-  cursor: help;
-}
-
-.rbg-graph .font-size-buttons {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.rbg-graph .font-size-buttons select {
-  font-size: inherit;
-  color: #0066cc;
-  border: 1px solid #0066cc;
-  border-radius: 4px;
-  background: #fff;
-}
-
-.rbg-graph .font-size-buttons .help-icon {
-  cursor: pointer;
-}
-
-.rbg-graph .font-size-buttons .help-icon:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.rbg-graph .help-tooltip {
-  display: none;
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  width: 320px;
-  padding: 8px 10px;
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  color: #0066cc;
-  line-height: 1.5;
-  z-index: 1000;
-}
-
-/* Show on hover, or when the icon is clicked/focused with the keyboard */
-.rbg-graph .help:hover .help-tooltip,
-.rbg-graph .help-icon:focus + .help-tooltip {
-  display: block;
-}
-
-.rbg-graph .node-search {
-  position: relative;
-}
-
-/* Track node: Parents [switch] Children */
-.rbg-graph .track-switch {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45em;
-  color: #999;
-  white-space: nowrap;
-}
-
-/* Colors come from create_graph options (parentsColor, childrenColor), set as CSS variables */
-.rbg-graph .track-switch .on {
-  font-weight: bold;
-}
-
-.rbg-graph .track-switch .parents.on {
-  color: var(--rbg-parents-color, #2e7d32);
-}
-
-.rbg-graph .track-switch .children.on {
-  color: var(--rbg-children-color, #7b1fa2);
-}
-
-.rbg-graph .switch {
-  position: relative;
-  width: 36px;
-  height: 20px;
-  padding: 0;
-  border: none;
-  border-radius: 10px;
-  background: var(--rbg-parents-color, #2e7d32);
-  cursor: pointer;
-}
-
-.rbg-graph .switch-knob {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #fff;
-  transition: left 0.15s;
-}
-
-/* Switch on: Children */
-.rbg-graph .switch[aria-checked='true'] {
-  background: var(--rbg-children-color, #7b1fa2);
-}
-
-.rbg-graph .switch[aria-checked='true'] .switch-knob {
-  left: 18px;
-}
-
-/* Track node is "No tracking": nothing to track, the switch is greyed out */
-.rbg-graph .track-switch.disabled {
-  opacity: 0.4;
-}
-
-.rbg-graph .switch:disabled {
-  cursor: not-allowed;
-}
-
-.rbg-graph .node-search > input {
-  padding: 0.4em 2em 0.4em 0.7em;
-  font-size: var(--rbg-top-controls-font-size, 14px);
-  min-width: 18.5em;
-  color: #0066cc;
-  font-weight: bold;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.rbg-graph .node-search > input::placeholder {
-  color: #0066cc;
-  font-weight: normal;
-  opacity: 0.7;
-}
-
-.rbg-graph .node-search-clear {
-  position: absolute;
-  right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  border: none;
-  background: none;
-  font-size: 16px;
-  line-height: 1;
-  color: #0066cc;
-  cursor: pointer;
-}
-
-.rbg-graph .node-search-list {
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  right: 0;
-  max-height: 320px;
-  overflow-y: auto;
-  margin: 0;
-  padding: 4px 0;
-  list-style: none;
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-}
-
-.rbg-graph .node-search-list li {
-  padding: 5px 10px;
-  font-size: var(--rbg-top-controls-font-size, 14px);
-  color: #0066cc;
-  cursor: pointer;
-}
-
-.rbg-graph .node-search-list li.active {
-  background: #e8f0fb;
-}
-
-/* Visibility checkbox in "Node to Display" */
-.rbg-graph .node-search-list li input[type='checkbox'] {
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-/* Node hidden from the graph */
-.rbg-graph .node-search-list li.off {
-  opacity: 0.5;
-}
-
-.rbg-graph .node-search-list li.node-search-empty {
-  cursor: default;
-  opacity: 0.7;
-}
-
-.rbg-graph .graph-area {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-}
-
-.rbg-graph .cy-container {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  background: #fff;
-}
-
-/* Right details panel text size comes from create_graph options (rightDisplayFontSize), set as a CSS variable */
-.rbg-graph .node-info-panel {
-  width: 300px;
-  flex-shrink: 0;
-  overflow-y: auto;
-  padding: 12px 16px;
-  border-left: 1px solid #ddd;
-  background: #fafafa;
-  color: #0066cc;
-  font-size: var(--rbg-right-display-font-size, 14px);
-}
-
-.rbg-graph .node-info-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.rbg-graph .node-info-header h2 {
-  margin: 0 0 8px;
-  font-size: var(--rbg-right-display-font-size, 14px);
-  font-weight: normal;
-  color: #0066cc;
-  word-break: break-word;
-}
-
-.rbg-graph .node-info-header button {
-  border: none;
-  background: none;
-  font-size: var(--rbg-right-display-font-size, 14px);
-  line-height: 1;
-  color: #0066cc;
-  cursor: pointer;
-}
-
-.rbg-graph .node-info-panel h3 {
-  margin: 16px 0 6px;
-  font-size: var(--rbg-right-display-font-size, 14px);
-  font-weight: bold;
-  color: #0066cc;
-}
-
-.rbg-graph .node-info-panel ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.rbg-graph .node-info-panel li button {
-  display: block;
-  width: 100%;
-  padding: 4px 6px;
-  border: none;
-  background: none;
-  text-align: left;
-  font-size: var(--rbg-right-display-font-size, 14px);
-  color: #0066cc;
-  cursor: pointer;
-}
-
-.rbg-graph .node-info-panel li button:hover {
-  background: #e8f0fb;
-}
-
-.rbg-graph .node-info-panel li span {
-  color: #0066cc;
-}
-
-.rbg-graph .node-context-menu {
-  position: fixed;
-  z-index: 1000;
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  padding: 4px 0;
-  min-width: 150px;
-}
-
-.rbg-graph .node-context-menu button {
-  display: block;
-  width: 100%;
-  padding: 6px 14px;
-  border: none;
-  background: none;
-  text-align: left;
-  font-size: 14px;
-  color: #0066cc;
-  cursor: pointer;
-}
-
-.rbg-graph .node-context-menu button:hover {
-  background: #e8f0fb;
-}
-
-/* One level / All levels switch under Group in the details panel */
-.rbg-graph .node-info-panel .level-switch {
-  margin: 4px 0 8px;
-}
+/* react-beauti-graph styles: everything is scoped under .rbg-graph */
+
+.rbg-graph {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+}
+
+/* Top controls row text size comes from create_graph options (topControlsFontSize), set as a CSS variable.
+   Spacing is in em, so it grows with the text size; the row wraps when it does not fit. */
+.rbg-graph .controls {
+  font-size: var(--rbg-top-controls-font-size, 14px);
+  padding: 0.7em 1em;
+  background: #fafafa;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5em 0.8em;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+}
+
+/* A label with its box (and the Track node switch): kept on one line */
+.rbg-graph .control-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em 0.8em;
+  white-space: nowrap;
+}
+
+.rbg-graph .controls label {
+  color: #0066cc;
+  white-space: nowrap;
+}
+
+.rbg-graph .help {
+  position: relative;
+  display: inline-flex;
+}
+
+.rbg-graph .help-icon {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid #0066cc;
+  border-radius: 50%;
+  background: #fff;
+  color: #0066cc;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1;
+  cursor: help;
+}
+
+.rbg-graph .font-size-buttons {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.rbg-graph .font-size-buttons select {
+  font-size: inherit;
+  color: #0066cc;
+  border: 1px solid #0066cc;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.rbg-graph .font-size-buttons .help-icon {
+  cursor: pointer;
+}
+
+.rbg-graph .font-size-buttons .help-icon:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.rbg-graph .help-tooltip {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  width: 320px;
+  padding: 8px 10px;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  color: #0066cc;
+  line-height: 1.5;
+  z-index: 1000;
+}
+
+/* Show on hover, or when the icon is clicked/focused with the keyboard */
+.rbg-graph .help:hover .help-tooltip,
+.rbg-graph .help-icon:focus + .help-tooltip {
+  display: block;
+}
+
+.rbg-graph .node-search {
+  position: relative;
+}
+
+/* Track node: Parents [switch] Children */
+.rbg-graph .track-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  color: #999;
+  white-space: nowrap;
+}
+
+/* Colors come from create_graph options (parentsColor, childrenColor), set as CSS variables */
+.rbg-graph .track-switch .on {
+  font-weight: bold;
+}
+
+.rbg-graph .track-switch .parents.on {
+  color: var(--rbg-parents-color, #2e7d32);
+}
+
+.rbg-graph .track-switch .children.on {
+  color: var(--rbg-children-color, #7b1fa2);
+}
+
+.rbg-graph .switch {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 10px;
+  background: var(--rbg-parents-color, #2e7d32);
+  cursor: pointer;
+}
+
+.rbg-graph .switch-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  transition: left 0.15s;
+}
+
+/* Switch on: Children */
+.rbg-graph .switch[aria-checked='true'] {
+  background: var(--rbg-children-color, #7b1fa2);
+}
+
+.rbg-graph .switch[aria-checked='true'] .switch-knob {
+  left: 18px;
+}
+
+/* Track node is "No tracking": nothing to track, the switch is greyed out */
+.rbg-graph .track-switch.disabled {
+  opacity: 0.4;
+}
+
+.rbg-graph .switch:disabled {
+  cursor: not-allowed;
+}
+
+.rbg-graph .node-search > input {
+  padding: 0.4em 2em 0.4em 0.7em;
+  font-size: var(--rbg-top-controls-font-size, 14px);
+  min-width: 18.5em;
+  color: #0066cc;
+  font-weight: bold;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.rbg-graph .node-search > input::placeholder {
+  color: #0066cc;
+  font-weight: normal;
+  opacity: 0.7;
+}
+
+.rbg-graph .node-search-clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  background: none;
+  font-size: 16px;
+  line-height: 1;
+  color: #0066cc;
+  cursor: pointer;
+}
+
+.rbg-graph .node-search-list {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  right: 0;
+  max-height: 320px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+.rbg-graph .node-search-list li {
+  padding: 5px 10px;
+  font-size: var(--rbg-top-controls-font-size, 14px);
+  color: #0066cc;
+  cursor: pointer;
+}
+
+.rbg-graph .node-search-list li.active {
+  background: #e8f0fb;
+}
+
+/* Visibility checkbox in "Node to Display" */
+.rbg-graph .node-search-list li input[type='checkbox'] {
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+/* Node hidden from the graph */
+.rbg-graph .node-search-list li.off {
+  opacity: 0.5;
+}
+
+.rbg-graph .node-search-list li.node-search-empty {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.rbg-graph .graph-area {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.rbg-graph .cy-container {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  background: #fff;
+}
+
+/* Right details panel text size comes from create_graph options (rightDisplayFontSize), set as a CSS variable */
+.rbg-graph .node-info-panel {
+  width: 300px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  padding: 12px 16px;
+  border-left: 1px solid #ddd;
+  background: #fafafa;
+  color: #0066cc;
+  font-size: var(--rbg-right-display-font-size, 14px);
+}
+
+.rbg-graph .node-info-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.rbg-graph .node-info-header h2 {
+  margin: 0 0 8px;
+  font-size: var(--rbg-right-display-font-size, 14px);
+  font-weight: normal;
+  color: #0066cc;
+  word-break: break-word;
+}
+
+.rbg-graph .node-info-header button {
+  border: none;
+  background: none;
+  font-size: var(--rbg-right-display-font-size, 14px);
+  line-height: 1;
+  color: #0066cc;
+  cursor: pointer;
+}
+
+.rbg-graph .node-info-panel h3 {
+  margin: 16px 0 6px;
+  font-size: var(--rbg-right-display-font-size, 14px);
+  font-weight: bold;
+  color: #0066cc;
+}
+
+.rbg-graph .node-info-panel ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.rbg-graph .node-info-panel li button {
+  display: block;
+  width: 100%;
+  padding: 4px 6px;
+  border: none;
+  background: none;
+  text-align: left;
+  font-size: var(--rbg-right-display-font-size, 14px);
+  color: #0066cc;
+  cursor: pointer;
+}
+
+.rbg-graph .node-info-panel li button:hover {
+  background: #e8f0fb;
+}
+
+.rbg-graph .node-info-panel li span {
+  color: #0066cc;
+}
+
+.rbg-graph .node-context-menu {
+  position: fixed;
+  z-index: 1000;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+  min-width: 150px;
+}
+
+.rbg-graph .node-context-menu button {
+  display: block;
+  width: 100%;
+  padding: 6px 14px;
+  border: none;
+  background: none;
+  text-align: left;
+  font-size: 14px;
+  color: #0066cc;
+  cursor: pointer;
+}
+
+.rbg-graph .node-context-menu button:hover {
+  background: #e8f0fb;
+}
+
+/* One level / All levels switch under Group in the details panel */
+.rbg-graph .node-info-panel .level-switch {
+  margin: 4px 0 8px;
+}
+
+.rbg-graph .export-svg {
+  margin-left: -0.5em; /* tuck against the font-size controls */
+  padding: 0.38em 1.05em;
+  font-size: 1em;
+  border: 0;
+  border-radius: 8px;
+  background: #0066cc;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  transition: background 0.15s;
+}
+
+.rbg-graph .export-svg:hover {
+  background: #0052a3;
+}
+
+.rbg-graph .export-svg:focus-visible {
+  outline: 2px solid #99c7ff;
+  outline-offset: 2px;
+}