[備忘] cytoscape-navigator を Boostrap5 のダークモードに対応させる、表示非表示ボタンを設置する

[MITSUHIRO-KURIKI]

• 表示非表示の切り替え

<label class="form-check-label d-flex align-items-center text-nowrap ms-1 fs-8"
       for="{{ IdCyNavigationSwitch }}">
    鳥瞰図の表示
</label>

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/templates/common/asset/cytoscape/cytoscape_body.html#L56}

        cy.panzoom(PanZoomOptions);
        // 鳥瞰図ウィジェットの配置(初期 hide クラス付与)
        const nav = cy.navigator({});
        $('.cytoscape-navigator').addClass('hide');
        $('#{{ IdCyNavigationSwitch }}').on('click', function () {
            if ( $(this).val() == 'false' ) {
                $(this).val('true');
                $('.cytoscape-navigator').removeClass('hide');
            } else {
                $(this).val('false');
                $('.cytoscape-navigator').addClass('hide');
            }
        });

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/templates/common/asset/cytoscape/cytoscape_scripts.html#L249}

.cytoscape-navigator {
	position:   fixed;
	bottom:     10px;
	right:      10px;
	width:      20vw;
	height:     13vw;
	min-width:  200px;
	min-height: 130px;
	border:     1px solid var(--bs-border-color);
	background: var(--graph-tertiary-bg);
	z-index:    1030;
	overflow:   hidden;
}
.cytoscape-navigator.hide {
	right:  min(-20vw, -200px);
	bottom: min(-20vw, -200px);
}

.cytoscape-navigator > img {
	max-width:  100%;
	max-height: 100%;
}
.cytoscape-navigator > canvas {
	position: absolute;
	top:      0;
	left:     0;
	z-index:  101;
}
.cytoscape-navigatorView {
	position:     absolute;
	top:          0;
	left:         0;
	cursor:       move;
	background:   var(--bs-primary-bg-subtle);
	opacity:      0.30;
	-moz-opacity: 0.30;
	-ms-filter:   "progid:DXImageTransform.Microsoft.Alpha"(Opacity=30);
	z-index:      102;
}
.cytoscape-navigatorOverlay {
	position: absolute;
	top:      0;
	right:    0;
	bottom:   0;
	left:     0;
	z-index:  103;
}

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/static/templates/common/lib/cytoscape-extensions/cytoscape-navigator/cytoscape-navigator.css}