diff --git a/examples/center.ipynb b/examples/center.ipynb new file mode 100644 index 00000000..b93d01f1 --- /dev/null +++ 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 index f97cbf9c..4392cce1 100644 --- 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  \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,20 @@ 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'); + this.subPanel2.addClass('cm-subPanel2'); + + + //this.subPanel2.addClass('cm-mergeViewEditor'); + if (merged) { //options.gutters = [GUTTER_CONFLICT_CLASS, GUTTER_PICKER_CLASS]; if (options.lineWrapping === undefined) { @@ -999,12 +1014,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 +1037,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 +1061,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 +1239,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 index fd54daa2..0ff1450f 100644 --- 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; +} +