Set the style of the mergeview.

jupyter · Jun 15, 2023 · 84e276e · 84e276e
1 parent 49873e7
commit 84e276e
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 43 deletions.
diff --git a/examples/center.ipynb b/examples/center.ipynb
@@ -0,0 +1,38 @@
+{
+ "cells": [
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "id": "44a9ad96-674a-49e5-94ee-9d84f386ecbc",
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "\n",
+ "a = np.arange(15).reshape(3, 5)\n",
+ "b = np.arange(5)\n",
+ "c = a + b"
+ ]
+ }
+ ],
+ "metadata": {
+ "kernelspec": {
+ "display_name": "Python 3 (ipykernel)",
+ "language": "python",
+ "name": "python3"
+ },
+ "language_info": {
+ "codemirror_mode": {
+ "name": "ipython",
+ "version": 3
+ },
+ "file_extension": ".py",
+ "mimetype": "text/x-python",
+ "name": "python",
+ "nbconvert_exporter": "python",
+ "pygments_lexer": "ipython3",
+ "version": "3.11.3"
+ }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/packages/nbdime/src/common/mergeview.ts b/packages/nbdime/src/common/mergeview.ts
@@ -8,7 +8,7 @@
 'use strict';
 
 import {
- Widget, Panel
+ Widget, Panel, SplitPanel
 } from '@lumino/widgets';
 
 import type {
@@ -55,6 +55,7 @@ import {
 } from '@codemirror/state';*/
 
 import {
+ lineNumbers,
  ViewPlugin,
  ViewUpdate
 } from '@codemirror/view';
@@ -211,7 +212,7 @@ class DiffView {
  //this.ownWidget = new EditorWidget(ownValue, copyObj({readOnly: !!options.readOnly}, options));
  this.ownWidget = new EditorWidget(ownValue); // OPTIONS TO BE GIVEN
  //this.ownWidget.editor.injectExtension(getCommonEditorExtensions());
- this.ownWidget.editor.injectExtension(diffViewPlugin);
+ this.ownWidget.editor.injectExtension([diffViewPlugin, lineNumbers()]);
  this.showDifferences = options.showDifferences !== false;
 
  }
@@ -305,16 +306,17 @@ class DiffView {
 
 
  buildGap(): HTMLElement {
- /* let lock = this.lockButton = elt('div', undefined, 'CodeMirror-merge-scrolllock');
+ let lock = this.lockButton = elt('div', undefined, 'cm-merge-scrolllock');
  lock.title = 'Toggle locked scrolling';
- let lockWrap = elt('div', [lock], 'CodeMirror-merge-scrolllock-wrap');
- let self: DiffView = this;
+ let lockWrap = elt('div', [lock], 'cm-merge-scrolllock-wrap');
+ // TODO: plug listener
+ lock.innerHTML = '\u21db&nbsp;&nbsp;\u21da';
+ /*let self: DiffView = this;
  CodeMirror.on(lock, 'click', function() {
  self.setScrollLock(!self.lockScroll);
- });
- return this.gap = elt('div', [lockWrap], 'CodeMirror-merge-gap'); */
- return (document.createElement("div"));
-
+ });*/
+ return this.gap = elt('div', [lockWrap], 'cm-merge-gap');
+ //return (document.createElement("div"));
  }
 
  setScrollLock(val: boolean, action?: boolean) {
@@ -953,8 +955,7 @@ class MergeView extends Panel {
  let remote = options.remote;
  let local = options.local || null;
  let merged = options.merged || null;
-
- let panes: number = 0;
+ //let panes: number = 0;
  let left: DiffView | null = this.left = null;
  let right: DiffView | null = this.right = null;
  let merge: DiffView | null = this.merge = null;
@@ -988,6 +989,16 @@ class MergeView extends Panel {
 
  let dvOptions = options;// as CodeMirror.MergeView.MergeViewEditorConfiguration;
 
+ this.splitPanel = new SplitPanel({orientation: 'vertical'});
+ this.addWidget(this.splitPanel);
+ this.subPanel1 = new Panel();
+ this.subPanel2 = new Panel();
+ SplitPanel.setStretch(this.subPanel1, 1);
+ SplitPanel.setStretch(this.subPanel2, 1);
+ this.subPanel1.addClass('cm-mergeView');
+ this.subPanel1.addClass('cm-mergeViewEditors');
+ this.subPanel2.addClass('cm-mergeViewEditor');
+
  if (merged) {
  //options.gutters = [GUTTER_CONFLICT_CLASS, GUTTER_PICKER_CLASS];
  if (options.lineWrapping === undefined) {
@@ -999,12 +1010,14 @@ class MergeView extends Panel {
  //this.base = new EditorWidget(options.value, copyObj({readOnly: !!options.readOnly}, options));
  this.base = new EditorWidget(options.value);
  //this.base.editor.injectExtension(getCommonEditorExtensions());
- this.base.editor.injectExtension(diffViewPlugin);
+ this.base.editor.injectExtension([diffViewPlugin, lineNumbers()]);
  //this.base.addClass('CodeMirror-merge-pane');
+ this.base.addClass('cm-mergeViewEditor');
  //this.base.addClass('CodeMirror-merge-pane-base');
 
  if (merged) {
  let showBase = options.showBase !== false;
+
  if (!showBase) {
  this.base.node.style.display = 'hidden';
  }
@@ -1020,12 +1033,18 @@ class MergeView extends Panel {
  this.diffViews.push(left);
  leftWidget = left.ownWidget;
  }
- leftWidget.addClass('CodeMirror-merge-pane');
- leftWidget.addClass('CodeMirror-merge-pane-local');
- this.addWidget(leftWidget);
+ //leftWidget.addClass('CodeMirror-merge-pane');
+ leftWidget.addClass('cm-mergeViewEditor');
+ //leftWidget.addClass('CodeMirror-merge-pane-local');
+ //this.addWidget(leftWidget);
+ console.log('left:' + left!.ownEditor.editor.state.doc.toString());
+ this.subPanel1.addWidget(leftWidget);
+
 
  if (showBase) {
- this.addWidget(this.base);
+ //this.addWidget(this.base);
+ console.log('base:' + this.base.editor.state.doc.toString());
+ this.subPanel1.addWidget(this.base);
  }
 
  let rightWidget: Widget;
@@ -1038,52 +1057,74 @@ class MergeView extends Panel {
  copyObj(dvOptions));
  this.diffViews.push(right);
  rightWidget = right.ownWidget;
+ console.log('right:' + right.ownEditor.editor.state.doc.toString());
  }
- rightWidget.addClass('CodeMirror-merge-pane');
- rightWidget.addClass('CodeMirror-merge-pane-remote');
- this.addWidget(rightWidget);
+ //rightWidget.addClass('CodeMirror-merge-pane');
+ rightWidget.addClass('cm-mergeViewEditor');
+ //rightWidget.addClass('CodeMirror-merge-pane-remote');
+ //this.addWidget(rightWidget);
+ this.subPanel1.addWidget(rightWidget);
+
 
- this.addWidget(new Widget({
+ /*this.addWidget(new Widget({
  node: elt('div', null, 'CodeMirror-merge-clear', 'height: 0; clear: both;')
- }));
+ }));*/
 
  merge = this.merge = new DiffView(merged, 'merge', this.alignViews.bind(this),
  copyObj({readOnly}, copyObj(dvOptions)));
  this.diffViews.push(merge);
  let mergeWidget = merge.ownWidget;
- mergeWidget.addClass('CodeMirror-merge-pane');
- mergeWidget.addClass('CodeMirror-merge-pane-final');
- this.addWidget(mergeWidget);
+ //mergeWidget.addClass('CodeMirror-merge-pane');
+ //mergeWidget.addClass('cm-mergeViewEditor');
+ //mergeWidget.addClass('CodeMirror-merge-pane-final');
+ //this.addWidget(mergeWidget);
+ mergeWidget.addClass('cm-mergeViewEditor');
+ console.log('merge:' + merge.ownEditor.editor.state.doc.toString());
+ this.subPanel2.addWidget(mergeWidget);
 
- panes = 3 + (showBase ? 1 : 0);
+
+ //panes = 3 + (showBase ? 1 : 0);
  } else if (remote) { // If in place for type guard
- this.addWidget(this.base);
+ //this.addWidget(this.base);
+ this.subPanel1.addWidget(this.base);
  if (remote.unchanged || remote.added || remote.deleted) {
  if (remote.unchanged) {
- this.base.addClass('CodeMirror-merge-pane-unchanged');
+ //this.base.addClass('CodeMirror-merge-pane-unchanged');
  } else if (remote.added) {
- this.base.addClass('CodeMirror-merge-pane-added');
+ //this.base.addClass('CodeMirror-merge-pane-added');
  } else if (remote.deleted) {
- this.base.addClass('CodeMirror-merge-pane-deleted');
+ //this.base.addClass('CodeMirror-merge-pane-deleted');
  }
- panes = 1;
+ //panes = 1;
  } else {
  right = this.right = new DiffView(remote, 'right', this.alignViews.bind(this), dvOptions);
  this.diffViews.push(right);
  let rightWidget = right.ownWidget;
- rightWidget.addClass('CodeMirror-merge-pane');
- rightWidget.addClass('CodeMirror-merge-pane-remote');
- this.addWidget(new Widget({node: right.buildGap()}));
- this.addWidget(rightWidget);
- panes = 2;
+ //rightWidget.addClass('CodeMirror-merge-pane');
+ rightWidget.addClass('cm-mergeViewEditor');
+ //rightWidget.addClass('CodeMirror-merge-pane-remote');
+ //this.addWidget(new Widget({node: right.buildGap()}));
+ //this.addWidget(rightWidget);
+
+ this.subPanel1.addWidget(new Widget({node: right.buildGap()}));
+ this.subPanel1.addWidget(rightWidget);
+
+
+
+ //panes = 2;
  }
- this.addWidget(new Widget({
+ /*this.addWidget(new Widget({
  node: elt('div', null, 'CodeMirror-merge-clear', 'height: 0; clear: both;')
- }));
+ }));*/
  }
 
- this.addClass('CodeMirror-merge');
- this.addClass('CodeMirror-merge-' + panes + 'pane');
+ //this.addClass('CodeMirror-merge');
+ //this.addClass('CodeMirror-merge-' + panes + 'pane');
+ //this.addClass('cm-mergeView');
+ //this.addClass('cm-mergeViewEditors');
+ this.splitPanel.addWidget(this.subPanel1);
+ this.splitPanel.addWidget(this.subPanel2);
+
 
  for (let dv of [left, right, merge]) {
  if (dv) {
@@ -1194,7 +1235,9 @@ class MergeView extends Panel {
  return this.merge.ownEditor.getValue();*/
  return '';
  }
-
+ splitPanel: SplitPanel;
+ subPanel1: Panel;
+ subPanel2: Panel;
  left: DiffView | null;
  right: DiffView | null;
  merge: DiffView | null;

diff --git a/packages/nbdime/src/styles/common.css b/packages/nbdime/src/styles/common.css
@@ -1,9 +1,9 @@
 
-.nbdime-root .CodeMirror-merge {
+/*.nbdime-root .CodeMirror-merge {
  position: relative;
- white-space: pre;
+ white-space: pre;*/
  /* style as jp-InputArea-editor: */
- border: var(--codemirror-border);
+ /*border: var(--codemirror-border);
  border-radius: 0px;
  background: var(--jp-cell-editor-background);
 }
@@ -88,4 +88,38 @@
 
 .nbdime-root .CodeMirror-merge-spacer {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);
+}*/
+
+.cm-merge-gap {
+ width: 6%;
+ color: var(--jp-ui-font-color2);
+ background: var(--jp-layout-color2);
+}
+
+.cm-merge-scrolllock-wrap {
+ position: absolute;
+ bottom: 0; left: 50%;
+}
+.cm-merge-scrolllock {
+ position: relative;
+ left: -50%;
+ cursor: pointer;
+ line-height: 1;
+}
+
+.cm-mergeView {
+ overflow-y: auto;
+ min-height: 200px;
 }
+.cm-mergeViewEditors {
+ display: flex;
+ align-items: stretch;
+ min-height:200px;
+}
+.cm-mergeViewEditor {
+ flex-grow: 1;
+ flex-basis: 0;
+ overflow: hidden;
+ min-height: 200px;
+}
+