diff --git a/src/lib/editor/editor.component.html b/src/lib/editor/editor.component.html
index 85d011e..7174a58 100644
--- a/src/lib/editor/editor.component.html
+++ b/src/lib/editor/editor.component.html
@@ -20,12 +20,10 @@
[resizerRight]="'#paper-container'">
-
diff --git a/src/lib/editor/editor.component.scss b/src/lib/editor/editor.component.scss
index fd4072d..52615e1 100644
--- a/src/lib/editor/editor.component.scss
+++ b/src/lib/editor/editor.component.scss
@@ -56,6 +56,7 @@ flo-view {
overflow: auto;
color: #FFF;
background-color: #FFF;
+ outline: none;
}
/* Tooltip START */
diff --git a/src/lib/editor/editor.component.ts b/src/lib/editor/editor.component.ts
index f950c7b..73694ac 100644
--- a/src/lib/editor/editor.component.ts
+++ b/src/lib/editor/editor.component.ts
@@ -1,4 +1,13 @@
-import { Component, Input, Output, ElementRef, EventEmitter, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import {
+ Component,
+ Input,
+ Output,
+ ElementRef,
+ EventEmitter,
+ OnInit,
+ OnDestroy,
+ ViewEncapsulation,
+} from '@angular/core';
import { debounceTime } from 'rxjs/operators';
import { dia } from 'jointjs';
import { Flo } from '../shared/flo-common';
@@ -157,6 +166,7 @@ export class EditorComponent implements OnInit, OnDestroy {
private _resizeHandler = () => this.autosizePaper();
+
constructor(private element: ElementRef) {
let self = this;
this.editorContext = new (class DefaultRunnableContext implements Flo.EditorContext {
@@ -1185,9 +1195,9 @@ export class EditorComponent implements OnInit, OnDestroy {
});
// JointJS now no longer grabs focus if working in a paper element - crude...
- $('#flow-view', this.element.nativeElement).on('mousedown', () => {
- $('#palette-filter-textfield', this.element.nativeElement).focus();
- });
+ // $('#flow-view', this.element.nativeElement).on('mousedown', () => {
+ // $('#palette-filter-textfield', this.element.nativeElement).focus();
+ // });
}
initPaper(): void {
diff --git a/src/lib/editor/paper.component.ts b/src/lib/editor/paper.component.ts
new file mode 100644
index 0000000..9e9837b
--- /dev/null
+++ b/src/lib/editor/paper.component.ts
@@ -0,0 +1,41 @@
+import {
+ Component,
+ ElementRef, EventEmitter,
+ HostListener,
+ Output,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
+
+@Component({
+ selector: 'flo-editor-paper',
+ template: `
+
+
+
`,
+ styleUrls: ['./editor.component.scss'],
+ encapsulation: ViewEncapsulation.None
+})
+export class PaperComponent {
+
+ @ViewChild('paper', { static: true }) paperElement: ElementRef;
+
+ @Output()
+ onDelete = new EventEmitter();
+
+ @HostListener('click')
+ click() {
+ this.paperElement.nativeElement.focus();
+ }
+
+ @HostListener('mousedown')
+ mousedown() {
+ this.paperElement.nativeElement.focus();
+ }
+
+ @HostListener('keydown.backspace')
+ backspaceHandle() {
+ this.onDelete.emit();
+ }
+
+}
diff --git a/src/lib/module.ts b/src/lib/module.ts
index 84dbcc4..9d795b4 100644
--- a/src/lib/module.ts
+++ b/src/lib/module.ts
@@ -9,6 +9,7 @@ import { DslEditorComponent } from './dsl-editor/dsl-editor.component';
import { CodeEditorComponent } from './code-editor/code-editor.component';
import { PropertiesGroupComponent } from './properties/properties.group.component';
import { DynamicFormPropertyComponent } from './properties/df.property.component';
+import { PaperComponent } from './editor/paper.component';
@NgModule({
imports: [
@@ -23,7 +24,8 @@ import { DynamicFormPropertyComponent } from './properties/df.property.component
DslEditorComponent,
CodeEditorComponent,
PropertiesGroupComponent,
- DynamicFormPropertyComponent
+ DynamicFormPropertyComponent,
+ PaperComponent
],
exports: [
EditorComponent,