import { html, css, LitElement, unsafeCSS, TemplateResult, PropertyValueMap } from 'lit'; import mainStyles from './style.js'; import './components/Button/IconButton.js'; import './components/Button/TextButton.js'; import './components/MoleculeCanvas.js'; import icons from './assets/VectorGraphics.js'; import { customElement, property } from 'lit/decorators.js'; import { query } from 'lit/decorators/query.js'; import { LitElementWw } from '@webwriter/lit'; import { MoleculeCanvas } from './components/MoleculeCanvas.js'; import { IconButton } from './components/Button/IconButton.js'; import { TextButton } from './components/Button/TextButton.js'; import SlButton from '@shoelace-style/shoelace/dist/components/button/button.component.js'; import SlTooltip from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js'; import { faPlus, biType, biMarkerTip, biHiglighter, biTypeItalic, biTypeBold, biEraser, cSingle, cDouble, cTripple, biEyeDropper, biArrowLeft, } from './icons.js'; import { PeriodicTable } from './components/PeriodicTable.js'; @customElement('webwriter-chemdraw') export class ChemDraw extends LitElementWw { public static get styles() { return [mainStyles]; } @property({ type: Number, attribute: false, reflect: false }) accessor zoom: number = 6; @property({ type: Boolean }) accessor _bold = false; @property({ type: Boolean }) accessor _italic = false; @property({ type: Boolean }) accessor _underline = false; @property({ type: Boolean }) accessor _delete = false; @property({ type: Boolean }) accessor _lewis = false; @property({ type: Boolean }) accessor _color = false; @property({ type: Boolean }) accessor _highlight = false; @property({ type: Array }) accessor _elements = new Array(); @property({ type: String }) accessor _insertMode = 'H'; @property({ type: Number }) accessor _bondMode = 1; @property({ type: Boolean }) accessor _elementselect = false; @property({ type: Object, attribute: true, reflect: true }) accessor molecule: { elements: { x: number; y: number; label: string; style: number; color: string; background: string; deco: any[]; }[]; bonds: { s: number; t: number; u: number; v: number; type: number }[]; }; @property({ type: Array }) accessor canvasList: Array = []; @query('#toolboxButtons') accessor toolboxButtons: HTMLElement; @query('#moleculeCanvas') accessor moleculeCanvas: MoleculeCanvas; constructor() { super(); this.zoom = 6; this._insertMode = 'H'; this._bondMode = 1; this.canvasList = [{}]; this._elements = [ { name: 'H', description: 'Wasserstoff', }, { name: 'C', description: 'Kohlenstoff', }, { name: 'N', description: 'Stickstoff', }, { name: 'O', description: 'Sauerstoff', }, { name: 'S', description: 'Schwefel', }, { name: 'F', description: 'Flour', }, { name: 'P', description: 'Phosphor', }, { name: 'Cl', description: 'Chlor', }, { name: 'Br', description: 'Brom', }, { name: 'I', description: 'Iod', }, ]; this.addEventListener('wheel', (e) => { e.preventDefault(); if (e.deltaY > 0) { if (this.zoom < 42) { this.zoom++; } } else { if (this.zoom > 6) { this.zoom--; } } }); } static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void { this.moleculeCanvas.addEventListener('ww-chem-molecule-change', (e: any) => { this.molecule = { ...e.detail.value }; }); if(typeof(this.molecule) === 'undefined'){ return } this.moleculeCanvas.molecule = this.molecule; } public static get scopedElements() { return { 'ww-chem-icon-button': IconButton, 'ww-chem-text-button': TextButton, 'ww-chem-molecule-canvas': MoleculeCanvas, 'webwriter-periodic-table': PeriodicTable, 'sl-button': SlButton, 'sl-tooltip': SlTooltip, }; } render() { return html` ${this.toolboxTemplate()}
{ this.canvasList = [ ...this.canvasList, { class: e.detail.value, }, ]; }} zoom=${this.zoom} ?delete=${this._edit} ?bold=${this._bold} ?italic=${this._italic} ?delete=${this._delete} ?lewis=${this._lewis} ?textColor=${this._color} ?highlightColor=${this._highlight} insertMode=${this._insertMode} bondMode=${this._bondMode} test=${this.test} id="moleculeCanvas" @ww-chem-molecule-change=${(e) => { console.log('change', e); this.molecule = e.detail.value; }} >
{ this._insertMode = e.detail.element.symbol; }} > `; } private toolboxTemplate(): TemplateResult { return html`
{ if (this._elementselect) { this._elementselect = false; } else { this.openToolbox(); } }} id="toolboxButton" > ${this._elementselect ? biArrowLeft : faPlus}
${biType}
{ this._highlight = !this._highlight; }} > ${biMarkerTip} { this._color = !this._color; }} > ${biHiglighter} { this._italic = !this._italic; }} > ${biTypeItalic} { this._bold = !this._bold; }} > ${biTypeBold}
{ this._delete = !this._delete; }} > ${biEraser}
${this._bondMode === 1 ? cSingle : this._bondMode === 2 ? cDouble : cTripple}
{ this._bondMode = 1; }} > ${icons.single} { this._bondMode = 2; }} > ${icons.double} { this._bondMode = 3; }} > ${icons.triple}
{ this._elementselect = !this._elementselect; this.toolboxButtons.classList.add('closed'); }} > ${biEyeDropper}
{ this._insertMode = 'H'; }} > H { this._insertMode = 'C'; }} > C { this._insertMode = 'N'; }} > N { this._insertMode = 'O'; }} > O { this._insertMode = 'S'; }} > S { this._insertMode = 'F'; }} > F { this._insertMode = 'P'; }} > P { this._insertMode = 'Cl'; }} > Cl { this._insertMode = 'Br'; }} > Br { this._insertMode = 'I'; }} > I
`; } private openToolbox(): void { this.toolboxButtons.classList.toggle('closed'); } }