n: ${this.curr_obj._content._molProperties[
mol._id + "n"
].toExponential(2)} mol
m: ${this.curr_obj._content._molProperties[
mol._id + "m"
].toExponential(2)} g
`;
this.contextMolInfo.innerHTML += `
`;
});
this.activateEComp.style.display = "none";
if (
this.curr_obj._type === chemlib.ComponentType.Burette ||
this.curr_obj._type === chemlib.ComponentType.Separatingfunnel
) {
this.openBtn.style.display = "";
this.openBtn.innerHTML = "Öffnen";
this.tickerFunctionList.forEach((arr) => {
if (
arr[0] ===
"transfer" + this.curr_name + this.curr_stage_index
) {
this.openBtn.innerHTML = "Schließen";
}
});
} else {
this.openBtn.style.display = "none";
}
if (
this.curr_obj._content._activeMolecules.length > 0 &&
this.curr_obj._content._isSolution
) {
this.contextMixInfo.innerHTML += `
vol: ${this.curr_obj._content._solutionVolume.toExponential(2)} l
pH: ${chemlib.Simulation.getpH(this.curr_obj._content)}
`;
this.contextMixInfo.style.borderLeftColor =
this.pHColors[
Math.round(
chemlib.Simulation.getpH(this.curr_obj._content)
)
];
}
}
if (
Object.values(chemlib.EComponentType).includes(
this.curr_obj._type.toLowerCase() as chemlib.EComponentType
)
) {
this.shadowRoot.getElementById("contextMolInfo").style.display =
"none";
this.shadowRoot.getElementById("contextMixInfo").style.display =
"none";
this.openBtn.style.display = "none";
this.contextEchemInfo.style.display = "";
this.contextEchemInfo.innerHTML = "";
if (
this.curr_obj._type === chemlib.EComponentType.Source ||
this.curr_obj._type === chemlib.EComponentType.Voltmeter
) {
this.activateEComp.style.display = "";
if (this.curr_obj._type === chemlib.EComponentType.Voltmeter) {
this.contextEchemInfo.innerHTML = `
Spannung: ${this.curr_obj._visibleVoltage.toExponential(2) + " V"}
`;
}
} else if (this.curr_obj._type === chemlib.EComponentType.Electrode){
this.activateEComp.style.display = "none";
this.contextEchemInfo.innerHTML = `
${this.dictionary[this.curr_obj._material.name]}
${typeof this.curr_obj._connectedMix != "undefined" ? "verbunden" : "nicht verbunden"}
`;
} else {
this.activateEComp.style.display = "none";
}
}
let wasAvail: boolean = false;
this.avComponentsSprites.forEach((arr) => {
if (arr[0] === this.app.stage.children[this.curr_stage_index]) {
wasAvail = true;
}
});
if (wasAvail && this.hasAttribute("contenteditable")) {
this.shadowRoot.getElementById("foldMenu").style.display = "none";
this.shadowRoot.getElementById("rem_obj").style.display = "none";
}
}
/**
* retrieves object information for a given sprite, updates the panel
*
* @private
* @param {*} sprite - the seleted sprite
*/
private _getObject(sprite): void {
let name = sprite.name;
let chemlib_obj = null;
let type: string = name.split(":")[0];
let id: number = Number.parseInt(name.split(":")[1]);
this.settings_drawer.innerHTML = this.dictionary[type];
if (
Object.values(chemlib.ComponentType).includes(
type.toLowerCase() as chemlib.ComponentType
)
) {
this.shadowRoot.getElementById("ecomp_panel").style.display =
"none";
this.shadowRoot.getElementById("comp_panel").style.display = "";
this.mixCarousel.innerHTML = "";
this._listAtoms();
this.curr_mol = null;
this._newMol();
if (this.bond_sel_3.innerHTML === "") {
this.curr_mol._bondTypes.forEach((key) => {
if(key in this.dictionary && key!= "hydrogen"){
// @ts-ignore
let bondType: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
bondType.innerHTML = this.dictionary[key];
bondType.value = key;
this.bond_sel_3.appendChild(bondType);
}
});
}
this.allChemComponents.forEach((comp) => {
if (
comp._type === (type as chemlib.ComponentType) &&
comp._id === id
) {
chemlib_obj = comp;
}
});
this.mixVolAmount.max = chemlib_obj._volume;
if (chemlib_obj._content._activeMolecules.length > 0) {
this.property_tag.variant = "primary";
this.property_tag.innerHTML = "Inhalt";
} else {
this.property_tag.variant = "warning";
this.property_tag.innerHTML = "leer";
}
let canvas_arr: string[] =
chemlib.StructureManager.printMolecules_arr(
chemlib_obj._content,
100,
100
);
chemlib_obj._content._activeMolecules.forEach(async (mol) => {
let currIndex =
chemlib_obj._content._activeMolecules.indexOf(mol);
let img = document.createElement("svg");
img.style.width = "190px"
img.style.height = "80px"
let infoDiv = document.createElement("div");
infoDiv.style.display = "flex";
infoDiv.style.flexDirection = "row";
infoDiv.style.justifyContent = "space-between"
infoDiv.style.overflow = "hidden";
infoDiv.style.width = "150px";
infoDiv.style.height = "80px";
infoDiv.style.borderStyle = "solid";
infoDiv.style.borderRadius = "5px";
infoDiv.style.borderWidth = "2px";
infoDiv.style.borderColor = "#0284c7";
infoDiv.appendChild(img);
if(this.newSmilesDrawer === 1){
SmilesDrawer.parse(mol.smilesString, (tree)=> {
this.smilesDrawer100.draw(tree, img, 'light');
}, (err) => {
console.log("Fallback rendering for " + mol.name + "("+mol.smilesString+")")
img.remove()
let fallbackImg = document.createElement("img")
fallbackImg.style.width = "190px"
fallbackImg.style.height = "80px"
fallbackImg.src = canvas_arr[chemlib_obj._content._activeMolecules.indexOf(mol)]
infoDiv.appendChild(fallbackImg)
})
}else{
img.remove()
let fallbackImg = document.createElement("img")
fallbackImg.style.width = "190px"
fallbackImg.style.height = "80px"
fallbackImg.src = canvas_arr[chemlib_obj._content._activeMolecules.indexOf(mol)]
infoDiv.appendChild(fallbackImg)
}
// @ts-ignore
let cItem: SlCarouselItem = this.shadowRoot.createElement(
"sl-carousel-item"
) as SlCarouselItem;
cItem.appendChild(infoDiv);
this.mixCarousel.appendChild(cItem);
chemlib.StructureManager.getChemData(
chemlib_obj._content._activeMolecules[currIndex]
);
await this.waitUntil(
() =>
chemlib_obj._content._activeMolecules[currIndex].name !=
""
);
infoDiv.innerHTML += `
${
chemlib_obj._content._activeMolecules[currIndex].name
}
${
"n: " +
chemlib_obj._content._molProperties[
mol._id + "n"
].toExponential(2)
}
${
"m: " +
chemlib_obj._content._molProperties[
mol._id + "m"
].toExponential(2)
}
${
chemlib_obj._content._isSolution
? "c:" +
chemlib_obj._content._molProperties[
mol._id + "c"
].toExponential(2)
: ""
}
`;
});
}
if (
Object.values(chemlib.EComponentType).includes(
type.toLowerCase() as chemlib.EComponentType
)
) {
this.shadowRoot.getElementById("comp_panel").style.display = "none";
this.shadowRoot.getElementById("ecomp_panel").style.display = "";
this.allEComponents.forEach((comp) => {
if (
comp._type === (type as chemlib.EComponentType) &&
comp._id === id
) {
chemlib_obj = comp;
}
});
this.conSelect.innerHTML = "";
this.allEComponents.forEach((eComp) => {
if (typeof eComp != "undefined") {
if (
eComp._id != chemlib_obj._id &&
!chemlib_obj._connections.includes(eComp) &&
eComp._type.toLowerCase() != "cable"
) {
// @ts-ignore
let option: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
option.value =
eComp._type +
":" +
this.allEComponents.indexOf(eComp);
option.innerHTML = this.dictionary[eComp._type];
option.onpointerover = (event) => {
this.app.stage.children.forEach((sprite) => {
if (
Number.parseInt(
sprite.name.split(":")[1]
) === eComp._id &&
sprite.name.split(":")[0] === eComp._type
) {
this._tintSprite(sprite, 0xbbf7d0);
}
});
};
option.onpointerout = (event) => {
this.app.stage.children.forEach((sprite) => {
let color: number = 0xffffff;
this.availableComponents.forEach(
(availComp) => {
if (
availComp["type"] ===
eComp._type.toLowerCase() &&
availComp["id"] === eComp._id
) {
if (
this.hasAttribute(
"contenteditable"
)
) {
color = 0xa7dbec;
}
}
}
);
this._tintSprite(sprite, color);
});
};
this.conSelect.appendChild(option);
}
}
});
this.eConInfo.innerHTML = "";
if (!sprite.name.includes("cable")) {
chemlib_obj._connections.forEach(
(cable: chemlib.ElectricComponent) => {
let conComp: chemlib.ElectricComponent =
cable._connections[0] === chemlib_obj
? cable._connections[1]
: cable._connections[0];
// @ts-ignore
let tag: SlTag = this.shadowRoot.createElement(
"sl-tag"
) as SlTag;
tag.innerHTML = this.dictionary[conComp._type];
tag.style.margin = "5px";
tag.title = "Doppelklicken zum Lösen der Verbindung."
tag.addEventListener("pointerenter", (event) => {
tag.variant = "success";
this.app.stage.children.forEach((sprite) => {
if (
Number.parseInt(
sprite.name.split(":")[1]
) === conComp._id &&
sprite.name.split(":")[0] === conComp._type
) {
this._tintSprite(sprite, 0xbbf7d0);
}
});
});
tag.addEventListener("pointerleave", (event) => {
tag.variant = "neutral";
this.app.stage.children.forEach((sprite) => {
this._tintSprite(sprite, 0xffffff);
});
});
tag.addEventListener("dblclick", (event) => {
let fallbackSprite = sprite
this.curr_obj._connections.forEach((comp:chemlib.ElectricComponent)=>{
if(comp._connections.includes(conComp)){
this._emitAlert(
"Verbindung gelöst zwischen " +
this.dictionary[this.curr_obj._type] +
" und " +
this.dictionary[conComp._type],
"danger",
false,
1500
);
this._remEcon(comp);
this.app.stage.children.forEach((sprite) => {
this._tintSprite(sprite, 0xffffff);
});
}
})
// console.log(fallbackSprite.name)
this._getObject(fallbackSprite)
});
this.eConInfo.appendChild(tag);
}
);
}
let eDivArr: HTMLCollection = this.eCompInfo.children;
switch (chemlib_obj._type) {
case "cable":
this.eCompInfo.style.visibility = "hidden";
this.conSelect.value = "";
this.eCompPanelVisible = [false, false, false];
break;
case "source":
this.eCompInfo.style.visibility = "";
this.conSelect.value = "";
this.eCompPanelVisible = [false, true, false];
let voltageInput: SlInput = this.shadowRoot.getElementById(
"sourceVoltage"
) as SlInput;
let currentInput: SlInput = this.shadowRoot.getElementById(
"sourceCurrent"
) as SlInput;
if (typeof chemlib_obj._sourceCurrent != "undefined") {
currentInput.value = chemlib_obj._sourceCurrent
.toString()
.replace(",", ".");
} else {
currentInput.value = "0";
}
if (typeof chemlib_obj._sourceVoltage != "undefined") {
voltageInput.value = chemlib_obj._sourceVoltage
.toString()
.replace(",", ".");
} else {
voltageInput.value = "0";
}
break;
case "voltmeter":
let mixVoltage: SlTag = this.shadowRoot.getElementById(
"shownVoltage"
) as SlTag;
mixVoltage.innerHTML =
chemlib_obj._visibleVoltage.toExponential(2) + " V";
this.eCompInfo.style.visibility = "";
this.conSelect.value = "";
this.eCompPanelVisible = [true, false, false];
break;
case "electrode":
this.eCompInfo.style.visibility = "";
this.conSelect.value = "";
this.eCompPanelVisible = [false, false, true];
let mixTag: SlTag = this.shadowRoot.getElementById(
"conMix"
) as SlTag;
let compName: string = "";
this.allChemComponents.forEach((comp) => {
if (chemlib_obj._connectedMix === comp._content) {
compName = comp._type;
}
});
mixTag.innerHTML = chemlib_obj._connectedMix
? "Lösung in " + this.dictionary[compName]
: "kein Gemisch";
let matSel: SlSelect = this.shadowRoot.getElementById(
"electrodeSelect"
) as SlSelect;
matSel.innerHTML = "";
this.electrodeMaterials.forEach((molData) => {
// @ts-ignore
let molOption: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
molOption.value = molData[0];
molOption.innerHTML = molData[0];
matSel.appendChild(molOption);
});
if (
typeof chemlib_obj._material != "undefined" &&
matSel.innerHTML.includes(chemlib_obj._material.name)
) {
matSel.value = chemlib_obj._material.name;
}
break;
default:
this.eCompInfo.style.visibility = "";
this.conSelect.value = "";
this.eCompPanelVisible = [true, true, true];
break;
}
for (let i = 0; i < eDivArr.length; i++) {
(eDivArr[i] as HTMLDivElement).style.display = this
.eCompPanelVisible[i]
? ""
: "none";
}
}
this.settings_drawer.removeAttribute("disabled");
(this.shadowRoot.getElementById("tab_select") as SlTabGroup).show(
"settings"
);
this.curr_stage_index = this.app.stage.children.indexOf(sprite);
this.curr_obj = chemlib_obj;
this.curr_name = name;
this.requestUpdate();
}
/**
* tints a sprite with a color
*
* @private
* @param {PIXI.Sprite} sprite - the sprite to be tinted
* @param {number} color - the selected color
*/
private _tintSprite(sprite: PIXI.Sprite, color: number): void {
sprite.tint = color;
}
/**
* asynchronous timer function to be used in other functions; returns, if the condition is met
*
* @param {*} condition - a condition to check
* @param {number} [checkInterval=10] - the check interval
* @returns {*}
*/
private waitUntil = (condition, checkInterval = 10) => {
return new Promise((resolve) => {
let interval = setInterval(() => {
if (!condition()) return;
clearInterval(interval);
resolve();
}, checkInterval);
});
};
/**
* removes an object and its corresponding sprite
*
* @private
*/
private _removeSprite(): void {
if (
Object.values(chemlib.EComponentType).includes(this.curr_obj._type)
) {
let length: number = this.curr_obj._connections.length;
for (let i = 0; i < length; i++) {
this._remEcon(this.curr_obj._connections[0]);
}
}
if (
this.curr_obj._type === "flask" ||
this.curr_obj._type === "beaker"
) {
this.allEComponents.forEach((eComp) => {
if (typeof eComp != "undefined") {
if (eComp._type === "electrode") {
if (eComp._connectedMix === this.curr_obj._content) {
eComp._connectedMix = undefined;
this._emitAlert(
eComp._type +
" aus " +
this.curr_obj._type +
" entfernt.",
"danger",
false,
1500
);
}
}
}
});
}
this.app.stage.removeChildAt(this.curr_stage_index);
if (this.allChemComponents.includes(this.curr_obj)) {
this.allChemComponents.splice(
this.allChemComponents.indexOf(this.curr_obj),
1
);
}
if (this.allEComponents.includes(this.curr_obj)) {
this.allEComponents.splice(
this.allEComponents.indexOf(this.curr_obj),
1
);
}
this.settings_drawer.innerHTML = "Objekt";
this.settings_drawer.setAttribute("disabled", "");
if (this.settings_drawer.active) {
this.shadowRoot.getElementById("comp_panel").style.display = "none";
this.shadowRoot.getElementById("ecomp_panel").style.display =
"none";
}
this._remTickerFunction(
"transfer" + this.curr_name + this.curr_stage_index
);
this._sendxAPiStatement("removed", this.curr_name);
this.curr_obj = null;
this.curr_name = "";
this.contextPopup.active = false;
if (this.app.stage.children.length === 1) {
this.curr_stage_index = -1;
return;
}
this._updateCablePos();
this._getObject(
this.app.stage.children[this.app.stage.children.length - 1]
);
}
/**
* loads available molecules into the corresponding select menu in the panel
*
* @private
*/
private _listMolecules(): void {
this.molSelect.innerHTML = "";
this.availableMolecules.forEach((molObject) => {
// @ts-ignore
let molEntry: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
molEntry.innerHTML = molObject["formula"];
molEntry.value = molObject["formula"];
this.molSelect.appendChild(molEntry);
});
}
/**
* loads available mixtures into the corresponding select menu in the panel
*
* @private
*/
private _listMixtures(): void {
this.mixSelect.innerHTML = "";
this.availableMixtures.forEach((mixObject) => {
// @ts-ignore
let mixEntry: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
mixEntry.innerHTML = mixObject["name"];
mixEntry.value = mixObject["name"];
this.mixSelect.appendChild(mixEntry);
});
}
/**
* loads available molecule into the teacher context menu, also appends controls
*
* @private
*/
private _listMolConfig(): void {
// @ts-ignore
let addMolButton: HTMLButtonElement = this.shadowRoot.createElement(
"button"
) as HTMLButtonElement;
addMolButton.id = "enter";
addMolButton.innerHTML = "hinzufügen";
addMolButton.onclick = (event) => {
this.settings_drawer.innerHTML = "neues Molekül";
this.tabPopup.active = true;
this.tab_select.show("settings");
this.contextMenu.style.display = "none";
this.shadowRoot.getElementById("comp_panel").style.display = "";
this.shadowRoot.getElementById("ecomp_panel").style.display =
"none";
this.settings_drawer.removeAttribute("disabled");
};
this.molConfig.appendChild(addMolButton);
this.availableMolecules.forEach((molEntry) => {
// @ts-ignore
let molDetails: SlDetails = this.shadowRoot.createElement(
"sl-details"
) as SlDetails;
molDetails.summary = molEntry["formula"];
// @ts-ignore
let delMolButton: HTMLButtonElement = this.shadowRoot.createElement(
"button"
) as HTMLButtonElement;
delMolButton.innerHTML = "entfernen";
delMolButton.className = "remObj";
delMolButton.onclick = (event) => {
this._emitAlert(
"Abhängige Einträge müssen ebenfalls entfernt werden.",
"primary",
true
);
let arrCopy: object[] = [];
this.availableMolecules.forEach((molEntry) => {
if (molEntry["formula"] !== molDetails.summary) {
arrCopy.push(molEntry);
}
});
this.availableMolecules = arrCopy;
this._listMolecules();
molDetails.remove();
};
// @ts-ignore
let molAtoms: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
molAtoms.label = "Atome";
molAtoms.size = "small";
molAtoms.readonly = true;
molAtoms.value = JSON.stringify(molEntry["atoms"])
.replace("[", "")
.replace("]", "")
.replace(/"/g, "");
// @ts-ignore
let molBonds: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
molBonds.autocomplete = "off";
molBonds.label = "Bindungen";
molBonds.size = "small";
molBonds.readonly = true;
molBonds.value = JSON.stringify(molEntry["bonds"])
.replace("[", "")
.replace("]", "")
.replace(/"/g, "");
molDetails.appendChild(delMolButton);
molDetails.appendChild(molAtoms);
molDetails.appendChild(molBonds);
this.molConfig.appendChild(molDetails);
});
}
/**
*loads available mixtures into the teacher context menu, also appends controls
*
* @private
*/
private _listMixConfig(): void {
// @ts-ignore
let addMixButton: HTMLButtonElement = this.shadowRoot.createElement(
"button"
) as HTMLButtonElement;
addMixButton.id = "enter";
addMixButton.innerHTML = "hinzufügen";
addMixButton.onclick = (event) => {
// @ts-ignore
let mixDetails: SlDetails = this.shadowRoot.createElement(
"sl-details"
) as SlDetails;
mixDetails.summary = "neues Gemisch";
// @ts-ignore
let setMixButton: HTMLButtonElement = this.shadowRoot.createElement(
"button"
) as HTMLButtonElement;
setMixButton.innerHTML = "speichern";
setMixButton.id = "foldMenu";
setMixButton.onclick = (event) => {
let newMixEntry: object = {
name: mixName.value,
content: contentString.split(","),
};
mixDetails.summary = newMixEntry["name"];
this.availableMixtures = [
...this.availableMixtures,
newMixEntry,
];
this.mixConfig.innerHTML = "";
mixDetails.remove();
this._listMixConfig();
this._listMixtures();
};
// @ts-ignore
let delMixButton: HTMLButtonElement = this.shadowRoot.createElement(
"button"
) as HTMLButtonElement;
delMixButton.innerHTML = "entfernen";
delMixButton.className = "remObj";
delMixButton.onclick = (event) => {
let arrCopy: object[] = [];
this.availableMixtures.forEach((mixEntry) => {
if (
mixEntry["name"] !==
mixDetails.summary.replace("_", " ")
) {
arrCopy.push(mixEntry);
}
});
this.availableMixtures = arrCopy;
this._listMixtures();
mixDetails.remove();
};
// @ts-ignore
let mixName: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
mixName.autocomplete = "off";
mixName.label = "Name";
mixName.size = "small";
mixName.readonly = false;
// @ts-ignore
let mixMolAmount: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
mixMolAmount.autocomplete = "off";
mixMolAmount.label = "Molekül: Stoffmenge";
mixMolAmount.size = "small";
mixMolAmount.type = "number";
mixMolAmount.placeholder = "mol";
mixMolAmount.min = 0;
mixMolAmount.readonly = false;
mixMolAmount.oninput = (event) => {
if (isNumber(mixMolAmount.value)) {
mixContent.disabled = false;
}
};
// @ts-ignore
let mixContent: SlSelect = this.shadowRoot.createElement(
"sl-select"
) as SlSelect;
mixContent.label = "Molekül: Auswahl";
mixContent.size = "small";
mixContent.hoist = true;
mixContent.multiple = true;
mixContent.disabled = true;
let contentString: string = "";
this.availableMolecules.forEach((molEntry) => {
// @ts-ignore
let molOption: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
molOption.value = molEntry["formula"];
molOption.innerHTML = molEntry["formula"];
molOption.onclick = (event) => {
contentString =
contentString === ""
? molOption.value +
":" +
mixMolAmount.value.toString()
: (contentString +=
"," +
molOption.value +
":" +
mixMolAmount.value.toString());
mixMolAmount.value = "";
mixMolAmount.focus();
mixContent.disabled = true;
};
mixContent.appendChild(molOption);
});
mixDetails.appendChild(setMixButton);
mixDetails.appendChild(delMixButton);
mixDetails.appendChild(mixName);
mixDetails.appendChild(mixMolAmount);
mixDetails.appendChild(mixContent);
this.mixConfig.appendChild(mixDetails);
mixDetails.show();
};
this.mixConfig.appendChild(addMixButton);
this.availableMixtures.forEach((mixEntry) => {
// @ts-ignore
let mixDetails: SlDetails = this.shadowRoot.createElement(
"sl-details"
) as SlDetails;
mixDetails.summary = mixEntry["name"];
// @ts-ignore
let delMixButton: HTMLButtonElement = this.shadowRoot.createElement(
"button"
) as HTMLButtonElement;
delMixButton.innerHTML = "entfernen";
delMixButton.className = "remObj";
delMixButton.onclick = (event) => {
this._emitAlert(
"Abhängige Einträge müssen ebenfalls entfernt werden.",
"primary",
true
);
let arrCopy: object[] = [];
this.availableMixtures.forEach((mixEntry) => {
if (
mixEntry["name"] !==
mixDetails.summary.replace("_", " ")
) {
arrCopy.push(mixEntry);
}
});
this.availableMixtures = arrCopy;
this._listMixtures();
mixDetails.remove();
};
// @ts-ignore
let mixContent: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
mixContent.autocomplete = "off";
mixContent.label = "Inhalt";
mixContent.size = "small";
mixContent.readonly = true;
mixContent.value = JSON.stringify(mixEntry["content"])
.replace("[", "")
.replace("]", "")
.replace(/"/g, "");
mixDetails.appendChild(delMixButton);
mixDetails.appendChild(mixContent);
this.mixConfig.appendChild(mixDetails);
});
}
/**
* loads available components into the teacher context menu, also appends controls
*
* @private
*/
private _listCompConfig(): void {
// @ts-ignore
let addCompButton: HTMLButtonElement = this.shadowRoot.createElement(
"button"
) as HTMLButtonElement;
addCompButton.id = "enter";
addCompButton.innerHTML = "hinzufügen";
addCompButton.onclick = (event) => {
// @ts-ignore
let compDetails: SlDetails = this.shadowRoot.createElement(
"sl-details"
) as SlDetails;
compDetails.summary = "neues Objekt";
// @ts-ignore
let setCompButton: HTMLButtonElement = this.shadowRoot.createElement("button") as HTMLButtonElement;
setCompButton.innerHTML = "speichern";
setCompButton.id = "foldMenu";
setCompButton.onclick = (event) => {
if (compType.value != "") {
if (compType.value === "Electrode") {
if (compMaterial.value === "") {
this._emitAlert(
"Der Elektrode muss ein Material zugewiesen werden!",
"warning",
true
);
return;
}
}
let newCompEntry: object = {
type: compType.value,
content: contentString.split(":")[0],
vol:
Number.parseFloat(contentString.split(":")[1]) /
1000,
pos: [this.mousePos[0], this.mousePos[1]],
voltage: compVoltage.value,
current: compCurrent.value,
material: compMaterial.value,
connections: [],
};
compDetails.summary = newCompEntry["type"];
this.availableComponents = [
...this.availableComponents,
newCompEntry,
];
this._loadComponents(newCompEntry);
this.compConfig.innerHTML = "";
this._listCompConfig();
} else {
this._emitAlert(
"es muss ein Objekttyp angegeben werden!",
"warning",
true
);
}
};
// @ts-ignore
let delCompButton: HTMLButtonElement = this.shadowRoot.createElement("button") as HTMLButtonElement;
delCompButton.innerHTML = "entfernen";
delCompButton.className = "remObj";
delCompButton.onclick = (event) => {
compDetails.remove();
};
// @ts-ignore
let compType: SlSelect = this.shadowRoot.createElement(
"sl-select"
) as SlInput;
compType.label = "Typ";
compType.size = "small";
compType.hoist = true;
Object.values(chemlib.ComponentType).forEach((type) => {
if(type != "condenser" && type != "separatingfunnel"){
// @ts-ignore
let typeOption: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
typeOption.value = type.replace(type[0], type[0].toUpperCase());
typeOption.innerHTML = this.dictionary[type]
compType.appendChild(typeOption);
}
});
Object.values(chemlib.EComponentType).forEach((type) => {
if (type != "cable") {
// @ts-ignore
let typeOption: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
typeOption.value = type.replace(
type[0],
type[0].toUpperCase()
);
typeOption.innerHTML = type.replace(
type[0],
type[0].toUpperCase()
);
compType.appendChild(typeOption);
}
});
compType.onclick = (event) => {
switch (compType.value) {
case "Electrode":
compContent.style.display = "none";
compMixVolume.style.display = "none";
compVoltage.style.display = "none";
compCurrent.style.display = "none";
compMaterial.style.display = "";
break;
case "Source":
compContent.style.display = "none";
compMixVolume.style.display = "none";
compVoltage.style.display = "";
compCurrent.style.display = "";
compMaterial.style.display = "none";
break;
case "Voltmeter":
compMixVolume.style.display = "none";
compContent.style.display = "none";
compVoltage.style.display = "none";
compCurrent.style.display = "none";
compMaterial.style.display = "none";
break;
case "Condenser":
case "Testtube":
case "Separatingfunnel":
case "Burette":
case "Flask":
case "Beaker":
compContent.style.display = "";
compMixVolume.style.display = "";
compMixVolume.max =
chemlib.ComponentManager._standardVolumes[
(compType.value as String).toLowerCase()
];
compVoltage.style.display = "none";
compCurrent.style.display = "none";
compMaterial.style.display = "none";
break;
default:
compContent.style.display = "none";
compMixVolume.style.display = "none";
compVoltage.style.display = "none";
compCurrent.style.display = "none";
compMaterial.style.display = "none";
break;
}
};
// @ts-ignore
let compMixVolume: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
compMixVolume.autocomplete = "off";
compMixVolume.label = "Inhalt: Volumen";
compMixVolume.size = "small";
compMixVolume.type = "number";
compMixVolume.placeholder = "Milliliter";
compMixVolume.min = 0;
compMixVolume.readonly = false;
compMixVolume.oninput = (event) => {
if (isNumber(compMixVolume.value)) {
if (
Number.parseInt(compMixVolume.value) >
Number.parseInt(compMixVolume.max as string)
) {
compMixVolume.value = compMixVolume.max as string;
}
compContent.disabled = false;
}
};
// @ts-ignore
let compContent: SlSelect = this.shadowRoot.createElement(
"sl-select"
) as SlSelect;
compContent.label = "Inhalt: Auswahl";
compContent.size = "small";
compContent.hoist = true;
compContent.multiple = true;
compContent.disabled = true;
let contentString: string = "";
this.availableMixtures.forEach((mixEntry) => {
//@ts-ignore
let mixOption: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
mixOption.value = mixEntry["name"];
mixOption.innerHTML = mixEntry["name"];
mixOption.onclick = (event) => {
contentString =
contentString === ""
? mixOption.value +
":" +
compMixVolume.value.toString()
: (contentString +=
"," +
mixOption.value +
":" +
compMixVolume.value);
compMixVolume.value = "";
compMixVolume.focus();
compContent.disabled = true;
};
compContent.appendChild(mixOption);
});
//@ts-ignore
let compVoltage: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
compVoltage.autocomplete = "off";
compVoltage.label = "Spannung";
compVoltage.size = "small";
compVoltage.readonly = false;
// @ts-ignore
let compCurrent: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
compCurrent.autocomplete = "off";
compCurrent.label = "Stromstärke";
compCurrent.size = "small";
compCurrent.readonly = false;
// @ts-ignore
let compMaterial: SlSelect = this.shadowRoot.createElement(
"sl-select"
) as SlInput;
compMaterial.label = "Material";
compMaterial.size = "small";
compMaterial.placeholder = "Element"
compMaterial.hoist = true;
this.availableMolecules.forEach((molEntry) => {
if(molEntry["atoms"].length === 1){
//@ts-ignore
let molMatOption: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
molMatOption.value = molEntry["formula"];
molMatOption.innerHTML = molEntry["formula"];
compMaterial.appendChild(molMatOption);
}
});
compMixVolume.style.display = "none";
compContent.style.display = "none";
compVoltage.style.display = "none";
compCurrent.style.display = "none";
compMaterial.style.display = "none";
compDetails.appendChild(setCompButton);
compDetails.appendChild(delCompButton);
compDetails.appendChild(compType);
compDetails.appendChild(compMixVolume);
compDetails.appendChild(compContent);
compDetails.appendChild(compVoltage);
compDetails.appendChild(compCurrent);
compDetails.appendChild(compMaterial);
this.compConfig.appendChild(compDetails);
compDetails.show();
};
this.compConfig.appendChild(addCompButton);
this.availableComponents.forEach((compEntry) => {
// @ts-ignore
let compDetails: SlDetails = this.shadowRoot.createElement(
"sl-details"
) as SlDetails;
compDetails.summary = compEntry["type"];
compDetails.id = compEntry["id"];
// @ts-ignore
let delCompButton: HTMLButtonElement = this.shadowRoot.createElement("button") as HTMLButtonElement;
delCompButton.innerHTML = "entfernen";
delCompButton.className = "remObj";
delCompButton.onclick = (event) => {
let arrCopy: object[] = [];
this.availableComponents.forEach((compEntry) => {
if (compEntry["connections"].length > 0) {
let remIndices: number[] = [];
for (
let i = 0;
i < compEntry["connections"].length;
i++
) {
if (
compEntry["connections"][i] ===
Number.parseInt(compDetails.id)
) {
remIndices.push(i);
}
if (
compEntry["connections"][i] >
Number.parseInt(compDetails.id)
) {
compEntry["connections"][i] -= 1;
}
}
remIndices.forEach((index) => {
compEntry["connections"].splice(index, 1);
});
}
if (compEntry["id"] != Number.parseInt(compDetails.id)) {
arrCopy.push(compEntry);
}
});
this.availableComponents = arrCopy;
let spriteIndex: number;
this.avComponentsSprites.forEach((arr) => {
if (arr[1] === Number.parseInt(compDetails.id)) {
spriteIndex = this.avComponentsSprites.indexOf(arr);
this._getObject(arr[0]);
}
});
this._removeSprite();
this.avComponentsSprites.splice(spriteIndex, 1);
compDetails.remove();
};
// @ts-ignore
let compContent: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
compContent.autocomplete = "off";
compContent.label = "Inhalt";
compContent.size = "small";
compContent.readonly = true;
if (typeof compEntry["content"] != "undefined") {
compContent.value = (
JSON.stringify(compEntry["content"]) +
":" +
JSON.stringify(compEntry["vol"])
)
.replace("[", "")
.replace("]", "")
.replace(/"/g, "");
}
// @ts-ignore
let compVoltage: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
compVoltage.autocomplete = "off";
compVoltage.label = "Spannung";
compVoltage.size = "small";
compVoltage.readonly = true;
if (typeof compEntry["voltage"] != "undefined") {
compVoltage.value = JSON.stringify(compEntry["voltage"])
.replace("[", "")
.replace("]", "")
.replace(/"/g, "");
}
// @ts-ignore
let compCurrent: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
compCurrent.label = "Stromstärke";
compCurrent.size = "small";
compCurrent.readonly = true;
if (typeof compEntry["current"] != "undefined") {
compCurrent.value = JSON.stringify(compEntry["current"])
.replace("[", "")
.replace("]", "")
.replace(/"/g, "");
}
// @ts-ignore
let compMaterial: SlInput = this.shadowRoot.createElement(
"sl-input"
) as SlInput;
compMaterial.autocomplete = "off";
compMaterial.label = "Material";
compMaterial.size = "small";
compMaterial.readonly = true;
if (typeof compEntry["material"] != "undefined") {
compMaterial.value = JSON.stringify(compEntry["material"])
.replace("[", "")
.replace("]", "")
.replace(/"/g, "");
}
switch (compDetails.summary) {
case "Electrode":
compContent.style.display = "none";
compVoltage.style.display = "none";
compCurrent.style.display = "none";
compMaterial.style.display = "";
break;
case "Source":
compContent.style.display = "none";
compVoltage.style.display = "";
compCurrent.style.display = "";
compMaterial.style.display = "none";
break;
case "Voltmeter":
compContent.style.display = "none";
compVoltage.style.display = "none";
compCurrent.style.display = "none";
compMaterial.style.display = "none";
break;
case "Condenser":
case "Testtube":
case "Separatingfunnel":
case "Burette":
case "Flask":
case "Beaker":
compContent.style.display = "";
compVoltage.style.display = "none";
compCurrent.style.display = "none";
compMaterial.style.display = "none";
break;
}
compDetails.appendChild(delCompButton);
compDetails.appendChild(compContent);
compDetails.appendChild(compVoltage);
compDetails.appendChild(compCurrent);
compDetails.appendChild(compMaterial);
this.compConfig.appendChild(compDetails);
});
}
/**
* loads available compoents into the corresponding part of the context menu
*
* @private
*/
private _listComponents(): void {
let details = this.shadowRoot.getElementById("details_comp");
if (this.components_signal[0]) {
return;
}
for (const en_key in chemlib.ComponentType) {
if(en_key.toLowerCase() != "separatingfunnel" && en_key.toLowerCase() != "condenser"){
let key: string = this.dictionary[en_key.toLowerCase()];
// @ts-ignore
let elem: SlMenuItem = this.shadowRoot.createElement(
"sl-menu-item"
) as SlMenuItem;
elem.addEventListener("click", () => {
this._addComponent(false, en_key);
this.contextMenu.style.display = "none";
});
elem.innerHTML = key;
elem.value = key;
details.appendChild(elem);
// @ts-ignore
let toElem: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
toElem.style.fontSize = "11pt";
toElem.innerHTML = key;
toElem.value = key;
this.invCompSelect.appendChild(toElem);
}
}
this.components_signal[0] = true;
}
/**
* loads available e-compoents into the corresponding part of the context menu
*
* @private
*/
private _listEComponents(): void {
let details = this.shadowRoot.getElementById("details_ecomp");
if (this.components_signal[1]) {
return;
}
for (const en_key in chemlib.EComponentType) {
if (en_key.toLowerCase() != "cable") {
let key: string = this.dictionary[en_key.toLowerCase()];
// @ts-ignore
let elem: SlMenuItem = this.shadowRoot.createElement(
"sl-menu-item"
) as SlMenuItem;
elem.addEventListener("click", () => {
this._addComponent(true, en_key);
this.contextMenu.style.display = "none";
});
elem.innerHTML = key;
elem.value = key;
details.appendChild(elem);
// @ts-ignore
let toElem: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
toElem.style.fontSize = "11pt";
toElem.innerHTML = key;
toElem.value = key;
this.invCompSelect.appendChild(toElem);
}
}
this.components_signal[1] = true;
}
/**
* loads element data into the panel view
*
* @private
*/
private _listAtoms(): void {
let elements: string[] = chemlib.ElementData.getElementList();
let field = this.shadowRoot.getElementById("atoms");
if (this.components_signal[2]) {
return;
}
let atom_container = field.appendChild(
document.createElement("atom_container")
);
elements.forEach((element) => {
let atom = document.createElement("button");
let atom_data = chemlib.ElementData.getData(element);
atom.id = "buttonAtom";
if (this.useColoredElements === 1) {
atom.style.borderBottomWidth = "10px";
switch (atom_data["category"]) {
case "diatomic nonmetal":
if (atom_data["group"] === 17) {
atom.style.borderColor = "#e83c95";
} else {
atom.style.borderColor = "#e42050";
}
break;
case "noble gas":
atom.style.borderColor = "#b6778c";
break;
case "alkali metal":
atom.style.borderColor = "#73962c";
break;
case "alkaline earth metal":
atom.style.borderColor = "#0e9a60";
break;
case "metalloid":
atom.style.borderColor = "#806db6";
break;
case "polyatomic nonmetal":
atom.style.borderColor = "#e42050";
break;
case "post-transition metal":
case "transition metal":
atom.style.borderColor = "#0f69af";
break;
case "lanthanide":
atom.style.borderColor = "#2dbecd";
break;
case "actinide":
atom.style.borderColor = "#3a9890";
break;
default:
atom.style.borderColor = "#4f4f4f";
break;
}
}
atom.addEventListener("click", () => {
this.curr_mol.addAtom(
atom_data["name"].toLowerCase(),
atom_data["symbol"]
);
this.curr_mol._atoms.forEach(atom=>{
console.log(atom._pos2D.toString())
})
this._sendxAPiStatement(
"appended",
this.curr_mol._kekule_obj.calcFormula().getDisplayText() +
":" +
this.curr_mol._id,
{
response: atom_data["name"],
completion: true,
success: true,
}
);
let src_string: string = chemlib.StructureManager.printMolecule(
this.curr_mol,
150,
150
);
(
this.shadowRoot.getElementById(
"mol_preview"
) as HTMLImageElement
).src = src_string;
this.bond_sel_1.innerHTML = "";
this.bond_sel_2.innerHTML = "";
this.curr_mol._atoms.forEach((atom) => {
// @ts-ignore
let atom_option_1: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
atom_option_1.innerHTML = atom.getName() + ":" + atom._id;
atom_option_1.value = atom.getName() + ":" + atom._id;
this.bond_sel_1.appendChild(atom_option_1);
// @ts-ignore
let atom_option_2: SlOption = this.shadowRoot.createElement(
"sl-option"
) as SlOption;
atom_option_2.innerHTML = atom.getName() + ":" + atom._id;
atom_option_2.value = atom.getName() + ":" + atom._id;
this.bond_sel_2.appendChild(atom_option_2);
});
this.requestUpdate();
});
atom.title =
this.dictionary[atom_data["name"].toLowerCase()] +
"\n" +
this.dictionary[atom_data["category"]];
atom.innerHTML = atom_data["symbol"];
atom.style.minWidth = "20px";
atom_container.appendChild(atom);
});
this.components_signal[2] = true;
}
/**
* filters elements based on selected categories, can be called multiple times
*
* @private
* @param {string} color - the color code of the selected category
*/
private _changeFilter(color: string): void {
let filterButtons: NodeListOf =
this.shadowRoot.querySelectorAll("#filterButton");
if (color === "none") {
this.filterCategories = [];
filterButtons.forEach((button) => {
(button as HTMLButtonElement).style.backgroundColor = "#fff";
(button as HTMLButtonElement).style.color = "#000";
});
} else {
let currButton: HTMLButtonElement = null;
filterButtons.forEach((button) => {
if ((button as HTMLButtonElement).style.borderColor === color) {
currButton = button as HTMLButtonElement;
}
});
if (this.filterCategories.includes(color)) {
this.filterCategories.splice(
this.filterCategories.indexOf(color),
1
);
currButton.style.backgroundColor = "#fff";
currButton.style.color = "#000";
} else {
this.filterCategories.push(color);
currButton.style.backgroundColor = color;
currButton.style.color = "#fff";
}
}
this._filterAtoms();
this._sendxAPiStatement("submitted", "filter " + this.filterCategories);
}
/**
* filters elements based on user input
*
* @private
*/
private _filterAtoms(): void {
let atomButtons: HTMLCollectionOf = this.shadowRoot
.getElementById("atoms")
.getElementsByTagName("atom_container")[0]
.getElementsByTagName("button");
let searchItem: string = this.elemSearch.value.toLowerCase();
let filterIndices: number[] = [];
for (let i = 0; i < atomButtons.length; i++) {
let currElem: HTMLButtonElement = atomButtons.item(i);
if (this.filterCategories.length < 1) {
break;
}
if (!this.filterCategories.includes(currElem.style.borderColor)) {
currElem.style.display = "none";
filterIndices.push(i);
} else {
atomButtons.item(i).style.display = "";
}
}
if (searchItem === "") {
for (let i = 0; i < atomButtons.length; i++) {
if (!filterIndices.includes(i)) {
atomButtons.item(i).style.display = "";
}
}
return;
}
for (let i = 0; i < atomButtons.length; i++) {
let currElem: HTMLButtonElement = atomButtons.item(i);
if (!filterIndices.includes(i)) {
if (
!(
currElem.title
.split("\n")[0]
.toLowerCase()
.includes(searchItem) ||
currElem.innerHTML.toLowerCase().includes(searchItem)
)
) {
currElem.style.display = "none";
} else {
atomButtons.item(i).style.display = "";
}
}
}
}
/**
* saves a new chemlib molecule, updates molecule list
*
* @private
* @param {chemlib.Molecule} mol - the molecule object
*/
private _saveMolecule(mol: chemlib.Molecule): void {
let molName: string = mol._kekule_obj.calcFormula().getDisplayText();
let molAtoms: string[] = [];
let molBonds: string[] = [];
mol._atoms.forEach((atom) => {
let label: string = atom.getName().toLowerCase();
molAtoms.push(label);
});
mol._bonds.forEach((bond) => {
let label: string =
bond._from._id +
"-" +
bond._to._id +
":" +
bond._type.toLowerCase() +
":" +
bond._magnitude;
molBonds.push(label);
});
let isAvailable: boolean = false;
this.availableMolecules.forEach((molEntry) => {
if (molEntry["formula"] === molName) {
isAvailable = true;
return;
}
});
if (!isAvailable) {
this.availableMolecules = [
...this.availableMolecules,
{
formula: molName,
atoms: molAtoms,
bonds: molBonds,
},
];
}
this._listMolecules();
}
/**
* loads prebuild mixtures from database
*
* @private
* @param {string} name -the name of the mixture
* @param {number} volAmount - the volume of the mixture
* @param {?object} [entry] - a specific entry to load from
* @returns {chemlib.Mixture} - the mixture object
*/
private _loadMixture(
name: string,
volAmount: number,
entry?: object
): chemlib.Mixture {
let newMix = chemlib.StructureManager.newMixture();
let selMixEntry: object = {};
if (typeof entry === "undefined") {
this.availableMixtures.forEach((mixEntry) => {
if (mixEntry["name"] === name) {
selMixEntry = mixEntry;
}
});
} else {
selMixEntry = entry;
}
if (Object.keys(selMixEntry).length != 0) {
selMixEntry["content"].forEach((mixEntry) => {
let molFormula: string = mixEntry.split(":")[0];
let molAmount: number =
Number.parseFloat(mixEntry.split(":")[1]) * volAmount;
let mol: chemlib.Molecule = this._loadMolecule(
molFormula,
false
);
newMix.addMolecule(mol, molAmount);
});
}
this.mixSelect.value = "";
this.mixVolAmount.value = "";
return newMix;
}
/**
* loads prebuild mixtures from database
*
* @private
* @async
* @param {?object} [entry] - a specific entry to load from
* @returns {Promise}
*/
private async _loadComponents(entry?: object): Promise {
// console.log(this.availableComponents, entry);
for (let component of this.availableComponents) {
// console.log("loop", component);
if (typeof entry != "undefined") {
if (component != entry) {
continue;
}
}
let newComp: chemlib.ChemComponent | chemlib.ElectricComponent;
if (
Object.values(chemlib.ComponentType).includes(
component["type"].toLowerCase() as chemlib.ComponentType
)
) {
newComp = chemlib.ComponentManager.newChemComponent(
component["type"].toLowerCase()
);
this.allChemComponents.push(newComp);
let newMix: chemlib.Mixture = this._loadMixture(
component["content"],
component["vol"]
);
newComp.addContents({ nMix: newMix });
} else {
newComp = chemlib.ComponentManager.newElectricComponent(
component["type"].toLowerCase()
);
switch (component["type"]) {
case "Electrode":
newComp._material = this._loadMolecule(
component["material"],
false
);
chemlib.StructureManager.getChemData(newComp._material);
await this.waitUntil(
() =>
(newComp as chemlib.ElectricComponent)._material
.name != ""
);
this.electrodeMaterials.push([
newComp._material.name,
newComp._material,
]);
break;
case "Source":
newComp._sourceVoltage = Number.parseFloat(
component["voltage"]
);
newComp._sourceCurrent = Number.parseFloat(
component["current"]
);
default:
break;
}
this.allEComponents.push(newComp);
}
this._addSprite(newComp._type + ":" + newComp._id);
let sprite: PIXI.Sprite =
this.app.stage.children[this.curr_stage_index];
sprite.x = component["pos"][0];
sprite.y = component["pos"][1];
if (this.hasAttribute("contenteditable")) {
this._tintSprite(sprite, 0xa7dbec);
} else {
this._tintSprite(sprite, 0xffffff);
}
this.avComponentsSprites.push([sprite, newComp._id]);
component["id"] = newComp._id;
}
this.availableComponents.forEach((comp) => {
comp["connections"].forEach((index) => {
let id = this.availableComponents[index]["id"];
let source: chemlib.ElectricComponent;
let partner: chemlib.ElectricComponent;
this.allEComponents.forEach((eComp) => {
if (eComp._type.toLowerCase() != "cable") {
if (eComp._id === id) {
partner = eComp;
}
if (eComp._id === comp["id"]) {
source = eComp;
}
}
});
// console.log(source._type, partner._type);
let save: boolean = true;
this.allEComponents.forEach((eComp) => {
if (eComp._type.toLowerCase() === "cable") {
if (
eComp._connections.includes(partner) &&
eComp._connections.includes(source)
) {
// console.log("false");
save = false;
}
}
});
if (save) {
// console.log("attempt connection");
this._addEcon(partner, source);
}
});
});
}
/**
* loads prebuild molecules from database
*
* @private
* @param {string} formula - the formula of the molecule
* @param {boolean} append - if the molecule should be appended to bond selecions
* @param {?object} [entry] - a specific entry to load from
* @returns {chemlib.Molecule} - the molecule object
*/
private _loadMolecule(
formula: string,
append: boolean,
entry?: object
): chemlib.Molecule {
let mol: chemlib.Molecule = chemlib.StructureManager.newMolecule();
let selMolEntry: object = {};
if (typeof entry === "undefined") {
this.availableMolecules.forEach((molEntry) => {
if (molEntry["formula"] === formula) {
selMolEntry = molEntry;
}
});
} else {
selMolEntry = entry;
}
if (Object.keys(selMolEntry).length != 0) {
selMolEntry["atoms"].forEach((atomEntry) => {
let atomSymbol: string =
chemlib.ElementData.getData(atomEntry)["symbol"];
let atom = mol.addAtom(atomEntry, atomSymbol);
if (append) {
this._appendBondsList(atom);
}
});
selMolEntry["bonds"].forEach((bondEntry) => {
if (bondEntry.length > 0) {
let separatedEntry: string[] = bondEntry.split(":");
let connectedIds: number[] = [
Number.parseInt(separatedEntry[0].split("-")[0]),
Number.parseInt(separatedEntry[0].split("-")[1]),
];
let bondType: string = separatedEntry[1];
let bondMag: number = Number.parseInt(separatedEntry[2]);
mol.addBond(
connectedIds[0],
connectedIds[1],
bondMag,
100,
bondType
);
}
});
}
return mol;
}
/**
* adds an atom to the selection lists for new bonds
*
* @private
* @param {chemlib.Atom} atom - the atom object
*/
private _appendBondsList(atom: chemlib.Atom): void {
this.bond_sel_1.innerHTML = "";
this.bond_sel_2.innerHTML = "";
this.bond_sel_1.value = "";
this.bond_sel_2.value = "";
this.bond_sel_3.value = "";
// @ts-ignore
let atomOption1: SlOption = this.shadowRoot.createElement("sl-option");
atomOption1.innerHTML = atom.getName() + ":" + atom._id;
atomOption1.value = atom.getName() + ":" + atom._id;
this.bond_sel_1.appendChild(atomOption1);
// @ts-ignore
let atomOption2: SlOption = this.shadowRoot.createElement("sl-option");
atomOption2.innerHTML = atom.getName() + ":" + atom._id;
atomOption2.value = atom.getName() + ":" + atom._id;
this.bond_sel_2.appendChild(atomOption2);
}
/**
* adds the current molecule to a mixture
*
* @private
*/
private _addToObj(): void {
if (this.hasAttribute("contenteditable")) {
let mol: chemlib.Molecule = this.curr_mol;
this._saveMolecule(mol);
this.molConfig.innerHTML = "";
this._listMolConfig();
this._newMol();
this.tabPopup.active = false;
} else {
if (this.curr_mol._atoms.length === 0) {
this._emitAlert(
"Es wurde kein Atom zum Molekül hinzugefügt.",
"warning",
true
);
return;
}
let amountRegex = /^[0-9]+(\.[0-9]+)?$/;
if (
this.molAmount.value === "" ||
!amountRegex.test(this.molAmount.value)
) {
this._emitAlert(
"Es wurde keine/eine falsche Menge angegeben. Der Wert muss eine Zahl ohne Einheit sein.",
"warning",
true
);
this._sendxAPiStatement("appended", this.curr_name, {
response:
this.curr_mol._kekule_obj
.calcFormula()
.getDisplayText() +
":" +
this.curr_mol._id +
"|" +
this.molAmount.value,
success: false,
completion: true,
});
return;
}
this._saveMolecule(this.curr_mol);
this.curr_obj.addContents({
nMolecule: this.curr_mol,
nMolAmount: Number.parseFloat(this.molAmount.value),
});
this._sendxAPiStatement("appended", this.curr_name, {
response:
this.curr_mol._kekule_obj.calcFormula().getDisplayText() +
":" +
this.curr_mol._id +
"|" +
this.molAmount.value,
success: true,
completion: true,
});
this._getObject(this.app.stage.children[this.curr_stage_index]);
(
this.shadowRoot.getElementById(
"mol_preview"
) as HTMLImageElement
).src = "";
this.bond_sel_1.innerHTML = "";
this.bond_sel_2.innerHTML = "";
this.bond_sel_1.value = "";
this.bond_sel_2.value = "";
this.bond_sel_3.value = "";
this.molAmount.value = "";
}
}
/**
* appends the current molecule to the list of electrode materials
*
* @private
* @async
* @returns {Promise}
*/
private async _newElectrodeMat(): Promise {
if (this.curr_mol._atoms.length > 1) {
this._emitAlert(
"Ein Elektrodenmaterial muss ein elementarer Stoff aus einem Atom sein.",
"warning",
true
);
return;
}
chemlib.StructureManager.getChemData(this.curr_mol);
await this.waitUntil(() => this.curr_mol.name != "");
this.electrodeMaterials.push([this.curr_mol.name, this.curr_mol]);
this._newMol();
}
/**
* creates an empty molecule object
*
* @private
*/
private _newMol(): void {
let mol: chemlib.Molecule = chemlib.StructureManager.newMolecule();
this.curr_mol = mol;
(
this.shadowRoot.getElementById("mol_preview") as HTMLImageElement
).src = "";
this.bond_sel_1.innerHTML = "";
this.bond_sel_1.value = "";
this.bond_sel_2.innerHTML = "";
this.bond_sel_2.value = "";
this.bond_sel_3.value = "";
}
/**
* sets a new bond between selected molecules from the panel
*
* @private
*/
private _enter(): void {
if (this.bond_sel_1.value === "" || this.bond_sel_2.value === "") {
this._emitAlert(
"Es wurden keine Atome für eine Bindung ausgewählt.",
"warning",
true
);
this._sendxAPiStatement(
"joined",
this.curr_mol._kekule_obj.calcFormula().getDisplayText() +
":" +
this.curr_mol._id,
{
response:
this.bond_sel_1.value +
"|" +
this.bond_sel_2.value +
"|" +
this.bond_sel_3.value,
success: false,
completion: true,
}
);
return;
}
if (this.bond_sel_1.value === this.bond_sel_2.value) {
this._emitAlert(
"Die ausgefählten Atome dürfen nicht die selben sein.",
"warning",
true
);
this._sendxAPiStatement(
"joined",
this.curr_mol._kekule_obj.calcFormula().getDisplayText() +
":" +
this.curr_mol._id,
{
response:
this.bond_sel_1.value +
"|" +
this.bond_sel_2.value +
"|" +
this.bond_sel_3.value,
success: false,
completion: true,
}
);
return;
}
if (this.bond_sel_3.value === "") {
this._emitAlert(
"Es muss eine Bindungsart ausgewählt werden.",
"warning",
true
);
this._sendxAPiStatement(
"joined",
this.curr_mol._kekule_obj.calcFormula().getDisplayText() +
":" +
this.curr_mol._id,
{
response:
this.bond_sel_1.value +
"|" +
this.bond_sel_2.value +
"|" +
this.bond_sel_3.value,
success: false,
completion: true,
}
);
return;
}
this.curr_mol.addBond(
Number.parseInt((this.bond_sel_1.value as string).split(":")[1]),
Number.parseInt((this.bond_sel_2.value as string).split(":")[1]),
Number.parseInt(this.bondMag.value),
100,
this.bond_sel_3.value as string
);
let src_string: string = chemlib.StructureManager.printMolecule(
this.curr_mol,
150,
150
);
(
this.shadowRoot.getElementById("mol_preview") as HTMLImageElement
).src = src_string;
this._sendxAPiStatement(
"joined",
this.curr_mol._kekule_obj.calcFormula().getDisplayText() +
":" +
this.curr_mol._id,
{
response:
this.bond_sel_1.value +
"|" +
this.bond_sel_2.value +
"|" +
this.bond_sel_3.value,
success: true,
completion: true,
}
);
}
/**
* adds a ne connection between two electric components
*
* @private
* @param {chemlib.ElectricComponent} partner - the component to connect to
* @param {?chemlib.ElectricComponent} [source] - the component to connect from
*/
private _addEcon(
partner: chemlib.ElectricComponent,
source?: chemlib.ElectricComponent
): void {
let cable: chemlib.ElectricComponent =
chemlib.ComponentManager.newElectricComponent(
chemlib.EComponentType.Cable
);
let message: string = "";
let ret1: string = "";
let ret2: string = "";
let sComp: chemlib.ElectricComponent = source ?? this.curr_obj;
ret1 += sComp.connect(cable);
ret2 += cable.connect(partner);
if (ret1 != ret2) {
message = ret1 + "\n" + ret2;
} else {
message = ret1;
}
this.allEComponents.push(cable);
this._addSprite(cable._type + ":" + cable._id);
this.app.stage.children.forEach((sprite) => {
if (
sprite.name.includes(sComp._type.toLowerCase()) &&
sprite.name.includes(sComp._id)
) {
this._getObject(sprite);
}
});
let isAvail1, isAvail2;
if (message === "" && typeof source === "undefined") {
this.availableComponents.forEach((comp) => {
if (comp["id"] === sComp._id) {
isAvail1 = [true, this.availableComponents.indexOf(comp)];
}
if (comp["id"] === partner._id) {
isAvail2 = [true, this.availableComponents.indexOf(comp)];
}
});
if (
typeof isAvail1 != "undefined" &&
typeof isAvail2 != "undefined"
) {
if (isAvail1[0] && isAvail2[0]) {
this.availableComponents[isAvail1[1]]["connections"].push(
isAvail2[1]
);
this.availableComponents[isAvail2[1]]["connections"].push(
isAvail1[1]
);
let arrCopy: object[] = [];
this.availableComponents.forEach((comp) => {
arrCopy.push(comp);
});
this.availableComponents = [];
this.availableComponents = arrCopy;
}
}
if(this.curr_obj._type != "cable" && partner._type != "cable"){
this._emitAlert(
message === ""
? "Neue Verbindung zwischen " +
this.dictionary[this.curr_obj._type] +
" und " +
this.dictionary[partner._type]
: message,
"success",
false,
1500
);
}
this._sendxAPiStatement(
"joined",
this.curr_obj._type + this.curr_obj._id,
{
response: partner._type + ":" + partner._id,
success: true,
completion: true,
}
);
} else if (message != "") {
this._emitAlert(message, "warning", true);
this._sendxAPiStatement(
"joined",
this.curr_obj._type + this.curr_obj._id,
{
response: partner._type + ":" + partner._id,
success: false,
completion: true,
}
);
}
}
/**
* removes a connection between a selected sprites object an its partner
*
* @private
* @param {chemlib.ElectricComponent} partner - the object to which the connection is to be removed
*/
private _remEcon(partner: chemlib.ElectricComponent): void {
let message: string = this.curr_obj.disconnect(partner);
this._getObject(this.app.stage.children[this.curr_stage_index]);
if (message === "") {
this._sendxAPiStatement(
"removed",
"eCon " + this.curr_obj._type + this.curr_obj._id,
{
response: partner._type + ":" + partner._id,
success: true,
completion: true,
}
);
} else {
this._emitAlert(message, "warning", true);
this._sendxAPiStatement(
"removed",
"eCon " + this.curr_obj._type + this.curr_obj._id,
{
response: partner._type + ":" + partner._id,
success: false,
completion: true,
}
);
}
}
/**
* applies a material to the selected electrode from the panel
*
* @private
*/
private _setElectrodeMaterlial(): void {
let matSel: SlSelect = this.shadowRoot.getElementById(
"electrodeSelect"
) as SlSelect;
this.electrodeMaterials.forEach((molData) => {
if (matSel.value === molData[0]) {
this.curr_obj._material = molData[1];
}
});
this._sendxAPiStatement(
"submitted",
"ElectrodeMaterlial " +
this.curr_obj._material._kekule_obj
.calcFormula()
.getDisplayText() +
":" +
this.curr_obj._id
);
}
/**
* applies the given values from the panel to the selected e-component
*
* @private
*/
private _setSourceValues(): void {
let voltageInput: SlInput = this.shadowRoot.getElementById(
"sourceVoltage"
) as SlInput;
let currentInput: SlInput = this.shadowRoot.getElementById(
"sourceCurrent"
) as SlInput;
this.curr_obj._sourceVoltage = Number.parseFloat(voltageInput.value);
this.curr_obj._sourceCurrent = Number.parseFloat(currentInput.value);
this._sendxAPiStatement(
"submitted",
"voltage " + this.curr_obj._type + ":" + this.curr_obj._id
);
}
/**
* checks, if the mouse is within the specified borders around a sprite
*
* @private
* @param {number} index - the index of the sprite
* @param {number} offset - an added offset between the sprite and the border
* @returns {boolean}
*/
private _mouseInbounds(index: number, offset: number): boolean {
if (this.app.stage.children.length === 1) {
return false;
}
let objWidth: number = this.app.stage.children[index].width;
let objHeight: number = this.app.stage.children[index].height;
let objX: number = this.app.stage.children[index].x - 0.5 * objWidth;
let objY: number = this.app.stage.children[index].y - 0.5 * objHeight;
return (
this.mousePos[0] > objX - offset &&
this.mousePos[0] < objWidth + objX + offset &&
this.mousePos[1] > objY - offset &&
this.mousePos[1] < objHeight + objY + offset
);
}
/**
* shows an alert with given properties
*
* @private
* @param {string} text - the content of the alert
* @param {string} variant - the showlace color variant
* @param {boolean} closable - if the alert box can be closed
* @param {?number} [duration] - how long the alert box will be shown
*/
private _emitAlert(
text: string,
variant: string,
closable: boolean,
duration?: number
) {
this.shadowRoot.getElementById("dialogText").innerHTML = text;
// @ts-ignore
this.dialogAlert.variant = variant;
this.dialogAlert.closable = closable;
if (duration) {
this.dialogAlert.duration = duration;
} else {
this.dialogAlert.duration = Infinity;
}
this.dialogAlert.show();
}
/**
* hides the alert box
*
* @private
*/
private _hideAlert(): void {
this.dialogAlert.hide();
}
/**
* applies the selected panel variant by modifying the split panel positions
*
* @private
*/
private _changePanelVariant(): void {
switch (this.panelVariant) {
case "1":
this.atomPanel.position = 55;
this.moleculePanel.position = 35;
this.mixCarousel.slidesPerPage = 2;
this.mixCarousel.slidesPerMove = 2;
break;
case "2":
this.atomPanel.position = 100;
this.moleculePanel.position = 35;
this.mixCarousel.slidesPerPage = 4;
this.mixCarousel.slidesPerMove = 4;
break;
case "3":
this.atomPanel.position = 100;
this.moleculePanel.position = 100;
this.mixCarousel.slidesPerPage = 4;
this.mixCarousel.slidesPerMove = 4;
break;
default:
break;
}
this.requestUpdate();
}
/**
* changes bewteen mouse and touch input
*
* @private
* @param {HTMLButtonElement} targetButton - the corresponding button that was pressed
*/
private _changeInputMode(targetButton: HTMLButtonElement): void {
let toggleDrag: HTMLButtonElement = this.shadowRoot.getElementById(
"toggleDrag"
) as HTMLButtonElement;
this.hasTouch = !this.hasTouch;
if (this.hasTouch) {
targetButton.innerHTML = `
`;
toggleDrag.style.visibility = "visible";
this._sendxAPiStatement("selected", "touch input");
} else {
targetButton.innerHTML = `
`;
toggleDrag.style.visibility = "hidden";
this._sendxAPiStatement("selected", "mouse input");
}
}
/**
* changes the touch input submode
*
* @private
* @param {HTMLButtonElement} targetButton - the corresponding button that was pressed
*/
private _toggleDrag(targetButton: HTMLButtonElement): void {
let toggleDrag: HTMLButtonElement = this.shadowRoot.getElementById(
"toggleDrag"
) as HTMLButtonElement;
this.dragToggle = !this.dragToggle;
if (this.dragToggle) {
targetButton.innerHTML = `
`;
this._sendxAPiStatement("selected", "touch drag mode");
} else {
targetButton.innerHTML = `
`;
this._sendxAPiStatement("selected", "touch select mode");
}
}
/**
* initializes the canvas and its events
*
* @private
*/
private _canvas_init() {
this.app = new PIXI.Application({
background: "rgb(238, 243, 246)",
backgroundAlpha: 0,
resizeTo: this.containerDiv,
});
this.pix_canvas.appendChild(this.app.view);
PIXI.BaseTexture.defaultOptions.scaleMode = PIXI.SCALE_MODES.NEAREST;
this.app.stage.eventMode = "static";
this.app.stage.hitArea = this.app.screen;
this.app.stage.sortableChildren = true;
this.app.stage.on("mousemove", (event) => {
this.mousePos = [event.screenX, event.screenY];
if (!this._mouseInbounds(this.curr_stage_index, 0)) {
this._dragEnd();
}
});
this.app.stage.on("pointerdown", (event) => {
if (this.contextMenu.style.display != "none") {
this.contextMenu.style.display = "none";
return;
}
if(event.pointerType === "mouse" && event.button === 2 || event.pointerType != "mouse" && event.pressure > 0.7){
this.mousePos = [event.screenX, event.screenY];
if (
this.curr_stage_index > -1 &&
this._mouseInbounds(this.curr_stage_index, 0)
) {
return;
}
this.contextMenu.style.display = "";
this.contextMenu.style.top =
Math.round(event.globalY).toString() + "px";
this.contextMenu.style.left =
Math.round(event.globalX).toString() + "px";
this.contextPopup.active = false;
this._sendxAPiStatement("opened", "objectMenu");
}
});
this.app.stage.on("pointerup", () => {
this._dragEnd();
});
this.app.stage.on("pointerupoutside", () => {
this._dragEnd();
});
}
/**
* sends an xAPi statement with a fetch request
*
* @private
* @async
* @param {string} action - the verb of the statement
* @param {string} context - the name of the object being interacted with
* @param {?object} [extra] - the result of the interaction
* @returns {Promise}
*/
private async _sendxAPiStatement(
action: string,
context: string,
extra?: object
): Promise {
if (!this.enablexAPI || this.hasAttribute("contenteditable")) {
return;
}
let date: Date = new Date();
var session: string =
date.getDay().toString() +
date.getMonth().toString() +
date.getFullYear().toString() +
this.RndName;
var verb = {
id: "",
display: {
de: "",
"en-US": "",
},
};
switch (action) {
case "pressed":
verb.id = "http://future-learning.info/xAPI/verb/pressed";
verb.display.de = "drückte";
verb.display["en-US"] = "pressed";
break;
case "completed":
verb.id = "http://activitystrea.ms/schema/1.0/complete";
verb.display.de = "beendete";
verb.display["en-US"] = "completed";
break;
case "selected":
verb.id = "https://brindlewaye.com/xAPITerms/verbs/selected";
verb.display.de = "wählte";
verb.display["en-US"] = "selected";
break;
case "closed":
verb.id = "http://activitystrea.ms/schema/1.0/close";
verb.display.de = "schloss";
verb.display["en-US"] = "closed";
break;
case "focused":
verb.id = "http://id.tincanapi.com/verb/focused";
verb.display.de = "wählte";
verb.display["en-US"] = "focused";
break;
case "submitted":
verb.id = "https://w3id.org/xapi/dod-isd/verbs/submitted";
verb.display.de = "reichte ein";
verb.display["en-US"] = "submitted";
break;
case "opened":
verb.id = "http://activitystrea.ms/schema/1.0/open";
verb.display.de = "oeffnete";
verb.display["en-US"] = "opened";
break;
case "created":
verb.id = "http://activitystrea.ms/schema/1.0/create";
verb.display.de = "erstellte";
verb.display["en-US"] = "created";
break;
case "registered":
verb.id = "http://adlnet.gov/expapi/verbs/registered";
verb.display.de = "registrierte";
verb.display["en-US"] = "registered";
break;
case "started":
verb.id = "http://activitystrea.ms/schema/1.0/start";
verb.display.de = "startete";
verb.display["en-US"] = "started";
break;
case "inserted":
verb.id = "http://activitystrea.ms/schema/1.0/insert";
verb.display.de = "fügte ein";
verb.display["en-US"] = "inserted";
break;
case "removed":
verb.id = "http://activitystrea.ms/schema/1.0/remove";
verb.display.de = "entfernte";
verb.display["en-US"] = "removed";
break;
case "added":
verb.id = "http://activitystrea.ms/schema/1.0/add";
verb.display.de = "fügte hinzu";
verb.display["en-US"] = "added";
break;
case "appended":
verb.id = "http://activitystrea.ms/schema/1.0/append";
verb.display.de = "erweiterte";
verb.display["en-US"] = "appended";
break;
case "joined":
verb.id = "http://activitystrea.ms/schema/1.0/join";
verb.display.de = "verband";
verb.display["en-US"] = "joined";
break;
default:
break;
}
const statement = {
actor: {
mbox: "mailto:dummy@webwriterchemlabdummymail.de",
name: session,
},
verb: verb,
object: {
objectType: "Agent",
name: context,
mbox:
"mailto:dummy" +
context.replace(":", "") +
"@webwriterchemlabdummymail.de",
},
result: extra,
};
await fetch("https://lrs.elearn.rwth-aachen.de/data/xAPI/statements", {
mode: "cors",
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Experience-API-Version": "1.0.3",
Authorization: this.xAPIKey,
},
body: JSON.stringify(statement),
})
.then((response) => {
/*console.log(response)*/
})
.catch((error) => console.error(error.message));
}
/**
* disables preselected compoents for student use
*
* @private
*/
private filterComponents(): void {
let eDetails = this.shadowRoot.getElementById("details_ecomp");
let cDetails = this.shadowRoot.getElementById("details_comp");
for (let i = 0; i < eDetails.childElementCount; i++) {
if (this.invComponents.includes(eDetails.children[i].innerHTML)) {
eDetails.children[i].setAttribute("disabled", "true");
} else {
eDetails.children[i].removeAttribute("disabled");
}
}
for (let i = 0; i < cDetails.childElementCount; i++) {
if (this.invComponents.includes(cDetails.children[i].innerHTML)) {
cDetails.children[i].setAttribute("disabled", "true");
} else {
cDetails.children[i].removeAttribute("disabled");
}
}
}
/**
* renders the entire widget
*
* @returns {*}
*/
render() {
return html`
Objekt-Kontextmenü
Hier können das Objekt verwaltet und grundlegende
Information angesehen werden.
Vollbild an/aus
Über diesen Button kann der Vollbildmodus an und aus
geschaltet werden. Aktuell deaktiviert.
Eingabemodus
Über diesen Button kann zwischen Maus- und
Touch-Steuerung gewechselt werden.
Dragging an/aus
Bei der Touch-Steuerung kann über diesen Button
umgeschaltet werden, wie Objekte auf Berührungen
reagieren.
Diagramm Menü
Über diesen Button wird das Diagramm Menü an der
linken Seite geöffnet.
Kontextmenü
${this.hasAttribute("contenteditable") ? "Uber dieses Menü können chemische Stoffe und Komponenten erstellt und vorgegeben werden." : "Über dieses Menü können neue Objekte ausgewählt und platziert werden."}
Message Toast
Hier werden Statusmeldungen angezeigt.
Chemlab Optionen
Alles Anzeigen
Inhalt & Molekül
Nur Inhalt
Experimentelle Moleküldarstellung
${this.pix_canvas}
Diagramme
{
this.diagShowLine = !this.diagShowLine;
this.diagramList.forEach((diag) => {
diag[0].data.datasets.forEach((dataset) => {
dataset.showLine = this.diagShowLine;
});
diag[0].update();
});
}}
>Kurven anzeigen