Permalink
Browse files

Merge branch 'polymer2'

  • Loading branch information...
rhysd committed Nov 24, 2017
2 parents a8cf250 + 3bc828a commit 99c1e40b9b7811385b1bcbb8ad8acdd1ecc74fb3
View
@@ -17,7 +17,7 @@
"main": "neovim-component.html",
"license": "MIT",
"dependencies": {
"polymer": "^1.10.1",
"webcomponentsjs": "^0.7.24"
"polymer": "^2.2.0",
"webcomponentsjs": "^1.0.19"
}
}
View
@@ -6,18 +6,18 @@
min-width: 0px;
min-height: 0px;
}
.neovim-wrapper {
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.neovim-cursor {
#cursor {
padding: 0px;
margin: 0px;
position: absolute;
}
.neovim-input {
#input {
width: 1px;
color: transparent;
background-color: transparent;
@@ -29,18 +29,17 @@
top: 0px;
left: 0px;
}
.neovim-fake-preedit {
#preedit {
display: none;
visibility: hidden;
position: fixed;
}
</style>
<div class="neovim-wrapper">
<canvas class="neovim-canvas" width$="[[width]]" height$="[[height]]"></canvas>
<canvas class="neovim-cursor">
</canvas>
<input class="neovim-input" autocomplete="off" autofocus />
<span class="neovim-fake-preedit"></span>
<div id="container">
<canvas id="screen" width$="[[width]]" height$="[[height]]"></canvas>
<canvas id="cursor"></canvas>
<input id="input" autocomplete="off" autofocus />
<span id="preedit"></span>
</div>
</template>
</dom-module>
View
@@ -45,9 +45,7 @@
"@types/loglevel": "^1.5.3",
"@types/mocha": "^2.2.44",
"@types/node": "^8.0.47",
"@types/polymer": "^1.2.1",
"@types/react": "^16.0.19",
"@types/webcomponents.js": "^0.6.32",
"@types/webdriverio": "^4.8.6",
"bower": "^1.8.2",
"browserify": "^14.5.0",
View
@@ -1,60 +1,83 @@
import Neovim from './neovim';
Polymer({
is: 'neovim-editor',
class NeovimEditor extends Polymer.Element {
static get is() {
return 'neovim-editor';
}
properties: {
width: Number,
height: Number,
fontSize: {
type: Number,
value: 12,
},
font: {
type: String,
value: 'monospace',
},
lineHeight: {
type: Number,
value: 1.3,
},
nvimCmd: {
type: String,
value: 'nvim',
},
argv: {
type: Array,
value: () => [] as string[],
},
disableAltKey: {
type: Boolean,
value: false,
},
disableMetaKey: {
type: Boolean,
value: false,
},
cursorDrawDelay: {
type: Number,
value: 10,
},
noBlinkCursor: {
type: Boolean,
value: false,
},
windowTitle: {
type: String,
value: 'Neovim',
},
editor: Object,
onProcessAttached: Object,
onQuit: Object,
onError: Object,
resizeHandler: Object,
},
static get properties() {
return {
width: Number,
height: Number,
fontSize: {
type: Number,
value: 12,
},
font: {
type: String,
value: 'monospace',
},
lineHeight: {
type: Number,
value: 1.3,
},
nvimCmd: {
type: String,
value: 'nvim',
},
argv: {
type: Array,
value: () => [] as string[],
},
disableAltKey: {
type: Boolean,
value: false,
},
disableMetaKey: {
type: Boolean,
value: false,
},
cursorDrawDelay: {
type: Number,
value: 10,
},
noBlinkCursor: {
type: Boolean,
value: false,
},
windowTitle: {
type: String,
value: 'Neovim',
},
onProcessAttached: Object,
onQuit: Object,
onError: Object,
};
}
width: number;
height: number;
fontSize: number;
font: string;
lineHeight: number;
nvimCmd: string;
argv: string[];
disableAltKey: boolean;
disableMetaKey: boolean;
cursorDrawDelay: number;
noBlinkCursor: boolean;
windowTitle: string;
editor: Neovim;
onProcessAttached: () => void;
onQuit: () => void;
onError: (err: Error) => void;
resizeHandler: NodeJS.Timer;
resizeListener: () => void;
ready: function() {
ready() {
super.ready();
this.editor = new Neovim(
this.$,
this.nvimCmd,
this.argv,
this.font,
@@ -79,36 +102,48 @@ Polymer({
if (this.onProcessAttached) {
this.editor.on('process-attached', this.onProcessAttached);
}
},
}
attached: function() {
const canvas: HTMLCanvasElement = document.querySelector('.neovim-canvas');
const width = this.width || canvas.parentElement.offsetWidth;
const height = this.height || canvas.parentElement.offsetHeight;
this.editor.attachCanvas(width, height, canvas);
this.resize_listener = () => {
if (this.resizeHandler !== null) {
clearTimeout(this.resizeHandler);
}
this.resizeHandler = setTimeout(
() => {
this.editor.screen.checkShouldResize();
this.resizeHandler = null;
},
100,
);
};
window.addEventListener('resize', this.resize_listener);
},
connectedCallback() {
super.connectedCallback();
Polymer.RenderStatus.afterNextRender(this, function () {
// measure size of element
const parent: HTMLCanvasElement = this.$.container;
const canvas: HTMLCanvasElement = this.$.screen;
const width = this.width || parent.offsetWidth;
const height = this.height || parent.offsetHeight;
this.editor.attachCanvas(width, height, canvas);
this.resizeListener = () => {
if (this.resizeHandler !== null) {
clearTimeout(this.resizeHandler);
}
this.resizeHandler = setTimeout(
() => {
this.editor.screen.checkShouldResize();
this.resizeHandler = null;
},
100,
);
};
this.$.container.addEventListener('resize', this.resizeListener);
});
}
detached: function() {
disconnectedCallback() {
super.disconnectedCallback();
this.editor.emit('detach');
if (this.resize_listener) {
window.removeEventListener('resize', this.resize_listener);
if (this.resizeListener) {
this.$.container.removeEventListener('resize', this.resizeListener);
}
}
attributeChangedCallback(name: string, oldVal: any, newVal: any, ns: string) {
super.attributeChangedCallback(name, oldVal, newVal, ns);
if (this.editor === undefined) {
return;
}
},
this.editor.emit('change-attribute', name, oldVal, newVal, ns);
}
}
attributeChanged: function(name: string, type: polymer.PropConstructorType) {
this.editor.emit('change-attribute', name, type);
},
});
customElements.define(NeovimEditor.is, NeovimEditor);
View
@@ -16,12 +16,21 @@ import {
import log from './log';
import {Nvim} from 'promised-neovim-client';
export interface DOM {
container: HTMLDivElement;
screen: HTMLCanvasElement;
cursor: HTMLCanvasElement;
input: HTMLInputElement;
preedit: HTMLSpanElement;
}
export default class Neovim extends EventEmitter {
process: Process;
screen: Screen;
store: NeovimStore;
constructor(
dom: DOM,
command: string,
argv: string[],
font: string,
@@ -35,7 +44,7 @@ export default class Neovim extends EventEmitter {
) {
super();
this.store = new NeovimStore();
this.store = new NeovimStore(dom);
this.store.dispatcher.dispatch(updateLineHeight(line_height));
this.store.dispatcher.dispatch(updateFontFace(font));
this.store.dispatcher.dispatch(updateFontPx(font_size));
View
@@ -72,7 +72,7 @@ export default class NeovimCursor {
constructor(private store: NeovimStore, private screen_ctx: CanvasRenderingContext2D) {
this.delay_timer = null;
this.blink_timer = new CursorBlinkTimer(this.store.cursor_blink_interval);
this.element = document.querySelector('.neovim-cursor');
this.element = this.store.dom.cursor;
this.element.style.top = '0px';
this.element.style.left = '0px';
this.ctx = this.element.getContext('2d', {alpha: false});
@@ -93,7 +93,7 @@ export default class NeovimCursor {
});
this.element.addEventListener('click', (e: MouseEvent) => {
e.preventDefault();
const i: HTMLInputElement = document.querySelector('.neovim-input');
const i = this.store.dom.input;
if (i) {
i.focus();
}
View
@@ -229,7 +229,7 @@ export default class NeovimInput {
constructor(private store: NeovimStore) {
this.ime_running = false;
this.element = document.querySelector('.neovim-input');
this.element = this.store.dom.input;
this.element.addEventListener('compositionstart', this.startComposition.bind(this));
this.element.addEventListener('compositionend', this.endComposition.bind(this));
this.element.addEventListener('keydown', this.onInputNonText.bind(this));
@@ -239,7 +239,7 @@ export default class NeovimInput {
this.store.on('cursor', this.updateElementPos.bind(this));
this.store.on('font-size-changed', this.updateFontSize.bind(this));
this.fake_element = document.querySelector('.neovim-fake-preedit');
this.fake_element = this.store.dom.preedit;
const {face} = this.store.font_attr;
this.element.style.fontFamily = face;
View
@@ -33,9 +33,8 @@ export default class ScreenDrag {
}
start(down_event: MouseEvent) {
down_event.preventDefault();
const wrapper = this.findScreenElement(down_event.target as HTMLElement);
if (wrapper !== null) {
const wrapper: HTMLElement = this.store.dom.container;
if (wrapper !== null && down_event.target !== null) {
const rect = (down_event.target as HTMLCanvasElement).getBoundingClientRect();
this.parentY = rect.top;
this.parentX = rect.left;
@@ -72,17 +71,6 @@ export default class ScreenDrag {
return input;
}
private findScreenElement(elem: HTMLElement | null) {
while (elem) {
// Note: Sure that passed 'elem' is not a screen element.
elem = elem.parentElement;
if (elem.classList.contains('neovim-wrapper')) {
return elem;
}
}
return null;
}
private getPos(e: MouseEvent) {
// Note:
// e.offsetX and e.offsetY is not available. On mouseup event, the cursor is under the mouse
View
@@ -3,6 +3,7 @@ import {Kind, ActionType, Region, ModeInfoSet} from './actions';
import log from '../log';
import ScreenDrag from './screen-drag';
import ScreenWheel from './screen-wheel';
import {DOM} from '../neovim';
import {Dispatcher} from 'flux';
// TODO:
@@ -79,7 +80,7 @@ export default class NeovimStore extends EventEmitter {
blink_cursor: boolean;
cursor_blink_interval: number;
constructor() {
constructor(public dom: DOM) {
super();
this.dispatcher = new Dispatcher<ActionType>();
this.size = {
Oops, something went wrong.

0 comments on commit 99c1e40

Please sign in to comment.