Skip to content

Commit

Permalink
JSDraw: Typing, monomers placeholders
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanas80
tanas80 committed Aug 12, 2024
1 parent 83c1a8b commit 380012a
Show file tree
Hide file tree
Showing 13 changed files with 1,170 additions and 1,053 deletions.
4 changes: 4 additions & 0 deletions HELM/source/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# HELMWebEditor changelog

## 1.1.7 (2024-08-12)

* Typing

## 1.1.6 (2024-07-08)

### Features
Expand Down
110 changes: 61 additions & 49 deletions HELM/source/helm/App.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@
import type {DojoType} from '@datagrok-libraries/js-draw-lite/src/types/dojo';

import type {JSDraw2ModuleType, ScilModuleType} from '@datagrok-libraries/js-draw-lite/src/types';
import type {IAppOptions, OrgType} from '../src/types/org-helm';
import type {IAppOptions, IRuleSet, OrgType} from '../src/types/org-helm';

import type {IPageForm, Page} from '@datagrok-libraries/js-draw-lite/page/Page';
import type {PageTab} from '@datagrok-libraries/js-draw-lite/page/Page.Tab';
import type {MonomerExplorer} from './MonomerExplorer';
Expand All @@ -37,6 +38,8 @@ import type {Form} from '@datagrok-libraries/js-draw-lite/form/Form';
import type {Editor} from '@datagrok-libraries/js-draw-lite/src/JSDraw.Editor';
import type {Bond} from '@datagrok-libraries/js-draw-lite/src/Bond';

import {HelmTabKeys} from '../src/types/org-helm';

declare const dojo: DojoType;
declare const scil: ScilModuleType;
declare const JSDraw2: JSDraw2ModuleType<HelmType>;
Expand Down Expand Up @@ -70,18 +73,18 @@ export class App {
private readonly T: string;
private readonly options: Partial<IAppOptions>;
public readonly toolbarheight: number;
public mex: MonomerExplorer;
public canvas: Editor<HelmType>;
public mex: MonomerExplorer | null;
public canvas: Editor<HelmType> | null;
public sequence: any;
public notation: HTMLElement;
public properties: Form;
public structureview: Editor;
private page: Page;
private treediv: HTMLDivElement;
private handle: HTMLDivElement;
private canvasform: IPageForm;
private sequencebuttons: any[];
private tabs: PageTab;
public notation: HTMLElement | null;
public properties: Form | null;
public structureview: Editor | null;
private page!: Page;
private treediv!: HTMLDivElement;
private handle!: HTMLDivElement;
private canvasform!: IPageForm;
private sequencebuttons!: any[];
private tabs!: PageTab;


/**
Expand Down Expand Up @@ -112,12 +115,12 @@ export class App {
* &lt;/script&gt;
* </pre>
**/
constructor(parent: HTMLElement | string, options) {
constructor(parent: HTMLElement | string, options: Partial<IAppOptions> = {}) {
this.T = "APP";
this.toolbarheight = 30;

if (typeof (parent) == "string")
parent = scil.byId(parent);
const parentEl: HTMLElement = typeof (parent) == "string" ? scil.byId(parent) : parent;

this.mex = null;
this.canvas = null;
this.sequence = null;
Expand All @@ -136,7 +139,7 @@ export class App {
org.helm.webeditor.Monomers.cleanupurl = this.options.monomercleanupurl;

if (this.options.rulesurl != null) {
scil.Utils.ajax(this.options.rulesurl, function(ret) {
scil.Utils.ajax(this.options.rulesurl, function(ret: any) {
if (ret.rules != null)
ret = ret.rules;
org.helm.webeditor.RuleSet.loadDB(ret);
Expand All @@ -145,14 +148,14 @@ export class App {

if (this.options.monomersurl != null) {
const me = this;
scil.Utils.ajax(this.options.monomersurl, function(ret) {
scil.Utils.ajax(this.options.monomersurl, function(ret: any) {
if (ret.monomers != null)
ret = ret.monomers;
org.helm.webeditor.Monomers.loadDB(ret, me.options.monomerfun);
me.init(parent);
me.init(parentEl);
});
} else {
this.init(parent);
this.init(parentEl);
}
};

Expand All @@ -162,8 +165,8 @@ export class App {
*/
calculateSizes() {
const d = dojo.window.getBox();
if (this.options.topmargin > 0)
d.h -= this.options.topmargin;
if (this.options.topmargin! > 0)
d.h -= this.options.topmargin!;

let leftwidth = 0;
if (this.page != null && this.page.explorer != null && this.page.explorer.left != null)
Expand All @@ -185,16 +188,16 @@ export class App {
* Intialize the App (internal use)
* @function init
*/
init(parent) {
init(parent: HTMLElement) {
const me = this;
const sizes = this.calculateSizes();

const tree = {
caption: this.options.topmargin > 0 ? null : "Palette",
caption: this.options.topmargin! > 0 ? null : "Palette",
marginBottom: "2px",
marginTop: this.options.topmargin > 0 ? "17px" : null,
onresizetree: function(width) { me.resizeWindow(); },
onrender: function(div) {
marginTop: this.options.topmargin! > 0 ? "17px" : null,
onresizetree: function(width: number) { me.resizeWindow(); },
onrender: function(div: HTMLDivElement) {
me.treediv = div;
me.createPalette(div, sizes.leftwidth - 10, sizes.height);
}
Expand All @@ -210,10 +213,10 @@ export class App {
//caption: "Canvas",
type: "custom",
marginBottom: "2px",
oncreate: function(div) { me.createCanvas(div, sizes.rightwidth, sizes.topheight); }
});
oncreate: function(div: HTMLDivElement) { me.createCanvas(div, sizes.rightwidth, sizes.topheight); }
})!;

this.handle = this.page.addResizeHandle(function(delta) { return me.onresize(delta); }, 8);
this.handle = this.page.addResizeHandle(function(delta: number) { return me.onresize(delta); }, 8);

this.sequencebuttons = [
{label: "Format", type: "select", items: ["", "RNA", "Peptide"], key: "format"},
Expand All @@ -225,38 +228,41 @@ export class App {
this.tabs.addForm({
caption: "Sequence",
type: "custom",
tabkey: "sequence",
tabkey: HelmTabKeys.Sequence,
buttons: this.options.sequenceviewonly ? null : this.sequencebuttons,
oncreate: function(div) { me.createSequence(div, sizes.rightwidth, sizes.bottomheight); }
oncreate: function(div: HTMLDivElement) { me.createSequence(div, sizes.rightwidth, sizes.bottomheight); }
});

this.tabs.addForm({
caption: "HELM",
type: "custom",
tabkey: "notation",
tabkey: HelmTabKeys.Helm,
buttons: this.options.sequenceviewonly ? null : [
{src: scil.Utils.imgSrc("img/moveup.gif"), label: "Apply", title: "Apply HELM Notation", onclick: function() { me.updateCanvas("notation", false); }},
{src: scil.Utils.imgSrc("img/add.gif"), label: "Append", title: "Append HELM Notation", onclick: function() { me.updateCanvas("notation", true); }},
{src: scil.Utils.imgSrc("img/tick.gif"), label: "Validate", title: "Validate HELM Notation", onclick: function() { me.validateHelm(); }}
],
oncreate: function(div) { me.createNotation(div, sizes.rightwidth, sizes.bottomheight); }
oncreate: function(div: HTMLDivElement) { me.createNotation(div, sizes.rightwidth, sizes.bottomheight); }
});

this.tabs.addForm({
caption: "Properties",
type: "custom",
tabkey: "properties",
oncreate: function(div) { me.createProperties(div, sizes.rightwidth, sizes.bottomheight); }
tabkey: HelmTabKeys.Properties,
oncreate: function(div: HTMLDivElement) { me.createProperties(div, sizes.rightwidth, sizes.bottomheight); }
});

this.tabs.addForm({
caption: "Structure View",
type: "custom",
tabkey: "structureview",
oncreate: function(div) { me.createStructureView(div, sizes.rightwidth, sizes.bottomheight); }
tabkey: HelmTabKeys.StructureView,
oncreate: function(div: HTMLDivElement) { me.createStructureView(div, sizes.rightwidth, sizes.bottomheight); }
});

scil.connect(window, "onresize", function(e) { me.resizeWindow(); });
if (this.options.currentTabKey)
this.tabs.tabs.showTab(this.options.currentTabKey);

scil.connect(window, "onresize", function(_e: any) { me.resizeWindow(); });
}

validateHelm() {
Expand All @@ -265,19 +271,19 @@ export class App {
return;
}

const url = this.options.validateurl;
const url: string = this.options.validateurl!;
if (scil.Utils.isNullOrEmpty(url)) {
scil.Utils.alert("The validation url is not configured yet");
return;
}

this.setNotationBackgroundColor("white");
const helm = scil.Utils.getInnerText(this.notation);
const helm = scil.Utils.getInnerText(this.notation!);
if (scil.Utils.isNullOrEmpty(helm))
return;

const me = this;
scil.Utils.ajax(url, function(ret) {
scil.Utils.ajax(url, function(ret: any) {
me.setNotationBackgroundColor(ret.valid ? "#9fc" : "#fcf");
}, {helm: helm});
}
Expand All @@ -287,6 +293,9 @@ export class App {
* @function resizeWindow
*/
resizeWindow() {
if (!this.canvas || !this.properties || !this.structureview || !this.mex || !this.notation)
throw new Error('Initialization is incomplete');

const sizes = this.calculateSizes();
this.canvas.resize(sizes.rightwidth, sizes.topheight - 70);

Expand All @@ -311,19 +320,22 @@ export class App {
const h = this.handle;
const b = this.tabs.tabs.dom;
if (h.nextSibling == b) {
a.parentNode.insertBefore(b, a);
a.parentNode.insertBefore(h, a);
a.parentNode!.insertBefore(b, a);
a.parentNode!.insertBefore(h, a);
} else {
a.parentNode.insertBefore(b, a.nextSibling);
a.parentNode.insertBefore(h, a.nextSibling);
a.parentNode!.insertBefore(b, a.nextSibling);
a.parentNode!.insertBefore(h, a.nextSibling);
}
}

/**
* Event handler when change window size (internal use)
* @function onresize
*/
onresize(delta) {
onresize(delta: number) {
if (!this.canvas || !this.properties || !this.structureview || !this.mex || !this.notation)
throw new Error('Initialization is incomplete');

if (this.handle.nextSibling == this.tabs.tabs.dom) {
const top = this.canvas.dimension.y;
const bottom = scil.Utils.parsePixel(this.sequence.style.height);
Expand Down Expand Up @@ -354,7 +366,7 @@ export class App {
* create monomer explorer (internal use)
* @function createPalette
*/
createPalette(div, width, height) {
createPalette(div: HTMLDivElement, width: number, height: number): void {
const opt = scil.clone(this.options);
opt.width = width;
opt.height = height;
Expand All @@ -365,7 +377,7 @@ export class App {
* create drawing canvas (internal use)
* @function createCanvas
*/
createCanvas(div, width, height) {
createCanvas(div: HTMLDivElement, width: number, height: number): void {
div.style.border = "solid 1px #eee";

const me = this;
Expand All @@ -378,7 +390,7 @@ export class App {
};

this.canvas = org.helm.webeditor.Interface.createCanvas(div, args);
this.canvas.helm.monomerexplorer = this.mex;
this.canvas.helm!.monomerexplorer = this.mex;
this.mex.plugin = this.canvas.helm; // TODO: ?

this.canvas._testdeactivation = function(e, ed) {
Expand Down
Loading

0 comments on commit 380012a

Please sign in to comment.