arnekeller/Typicalc
1
0
Fork 0
mirror of https://gitlab.kit.edu/uskyk/typicalc.git synced 2024-11-08 18:30:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.scc.kit.edu/pse-typinferenz/typicalc

Browse Source
This commit is contained in:
Johanna Stuber 2021-01-28 12:47:54 +01:00
commit c5d165e4eb
10 changed files with 283 additions and 1551 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/mathjax-adapter.ts
View File

@ -1,6 +1,5 @@
import {LitElement, html} from 'lit-element';
import {TemplateResult} from "lit-html";
declare let window: {
MathJax: {
typesetShadow: (arg0: ShadowRoot | null, arg1: () => void) => void,
@ -10,21 +9,8 @@ declare let window: {
};
export abstract class MathjaxAdapter extends LitElement {
protected execTypeset() {
if (window.MathJax !== undefined) {
window.MathJax.typesetShadow(this.shadowRoot, () => this.calculateSteps());
}
}
render(): TemplateResult {
return html`<mjx-doc><mjx-head></mjx-head><mjx-body>
<div id="tc-content"></div>
</mjx-body></mjx-doc>`;
}
connectedCallback() {
super.connectedCallback();
constructor() {
super();
if (window.MathJax === undefined || !window.MathJax.isInitialized) {
window.addEventListener('mathjax-initialized', () => this.execTypeset());
} else {
@ -32,6 +18,20 @@ export abstract class MathjaxAdapter extends LitElement {
}
}
protected execTypeset() {
if (window.MathJax !== undefined) {
window.MathJax.typesetShadow(this.shadowRoot, () => this.calculateSteps());
}
}
// @ts-ignore
render(): TemplateResult {
return html`<mjx-doc id="mjx-document"><mjx-head></mjx-head><mjx-body>
<div id="tc-content"></div>
</mjx-body></mjx-doc>`;
}
protected abstract showStep(n: number): void;
protected abstract calculateSteps(): void;

114
frontend/src/mathjax-setup.js Normal file
View File

@ -0,0 +1,114 @@
window.MathJax = {
loader: {load: ['[tex]/bussproofs', '[tex]/html', '[tex]/action']},
tex: {
packages: {'[+]': ['bussproofs', 'html', 'action']},
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
startup: {
ready: () => {
const mathjax = MathJax._.mathjax.mathjax;
const HTMLAdaptor = MathJax._.adaptors.HTMLAdaptor.HTMLAdaptor;
const HTMLHandler = MathJax._.handlers.html.HTMLHandler.HTMLHandler;
const AbstractHandler = MathJax._.core.Handler.AbstractHandler.prototype;
const startup = MathJax.startup;
//
// Extend HTMLAdaptor to handle shadowDOM as the document
//
class ShadowAdaptor extends HTMLAdaptor {
create(kind, ns) {
const document = (this.document.createElement ? this.document : this.window.document);
return (ns ?
document.createElementNS(ns, kind) :
document.createElement(kind));
}
text(text) {
const document = (this.document.createTextNode ? this.document : this.window.document);
return document.createTextNode(text);
}
head(doc) {
return doc.head || (doc.getElementById("mjx-document") || {}).firstChild || doc;
}
body(doc) {
return doc.body || (doc.getElementById("mjx-document") || {}).lastChild || doc;
}
root(doc) {
return doc.documentElement || doc.getElementById("mjx-document") || doc;
}
}
//
// Extend HTMLHandler to handle shadowDOM as document
//
class ShadowHandler extends HTMLHandler {
create(document, options) {
const adaptor = this.adaptor;
if (typeof (document) === 'string') {
document = adaptor.parse(document, 'text/html');
} else if ((document instanceof adaptor.window.HTMLElement ||
document instanceof adaptor.window.DocumentFragment) &&
!(document instanceof window.ShadowRoot)) {
let child = document;
document = adaptor.parse('', 'text/html');
adaptor.append(adaptor.body(document), child);
}
//
// We can't use super.create() here, since that doesn't
// handle shadowDOM correctly, so call HTMLHandler's parent class
// directly instead.
//
return AbstractHandler.create.call(this, document, options);
}
}
//
// Register the new handler and adaptor
//
startup.registerConstructor('HTMLHandler', ShadowHandler);
startup.registerConstructor('browserAdaptor', () => new ShadowAdaptor(window));
//
// A service function that creates a new MathDocument from the
// shadow root with the configured input and output jax, and then
// renders the document. The MathDocument is returned in case
// you need to rerender the shadowRoot later.
//
MathJax.typesetShadow = function (root, callback) {
const InputJax = startup.getInputJax();
const OutputJax = startup.getOutputJax();
const html = mathjax.document(root, {InputJax, OutputJax});
html.render();
if (callback != null) {
callback(html);
}
return html;
}
//
// Now do the usual startup now that the extensions are in place
//
let event = new Event('mathjax-initialized', {
bubbles: true,
composed: true,
detail: "composed"
})
MathJax.startup.defaultReady();
MathJax.startup.promise.then(() => {
console.log("MathJax initialized");
MathJax.isInitialized = true;
document.dispatchEvent(event);
})
}
}
};
(function () {
let script = document.createElement('script');
script.src = 'http://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-svg.js';
// script.async = true;
document.head.appendChild(script);
})();

26
frontend/styles/view/main/upper-bar.css Normal file
View File

@ -0,0 +1,26 @@
#header {
height: var(--lumo-size-xl);
}
#header img {
border-radius: 50%;
height: var(--lumo-size-s);
margin-left: auto;
margin-right: var(--lumo-space-m);
overflow: hidden;
background-color: var(--lumo-contrast);
}
#viewTitle {
font-size: var(--lumo-font-size-l);
margin-right: auto;
cursor: pointer;
}
#icon {
margin-left: auto;
margin-right: 20px;
}

201
package.json
View File

@ -1,154 +1,129 @@
{
"name": "typicalc",
"name": "no-name",
"license": "UNLICENSED",
"dependencies": {
"@polymer/iron-icon": "3.0.1",
"@polymer/iron-list": "3.1.0",
"@polymer/polymer": "3.2.0",
"@vaadin/flow-frontend": "./target/flow-frontend",
"@vaadin/router": "1.7.2",
"@vaadin/vaadin-app-layout": "2.2.0",
"@vaadin/vaadin-button": "2.4.0",
"@vaadin/vaadin-charts": "7.0.0",
"@vaadin/vaadin-combo-box": "5.4.7",
"@vaadin/vaadin-confirm-dialog": "1.3.0",
"@vaadin/vaadin-custom-field": "1.3.0",
"@vaadin/vaadin-details": "1.2.0",
"@vaadin/vaadin-dialog": "2.5.2",
"@vaadin/vaadin-form-layout": "2.3.0",
"@vaadin/vaadin-grid": "5.7.7",
"@vaadin/vaadin-icons": "4.3.2",
"@vaadin/vaadin-item": "2.3.0",
"@vaadin/vaadin-list-box": "1.4.0",
"@vaadin/vaadin-lumo-styles": "1.6.1",
"@vaadin/vaadin-material-styles": "1.3.2",
"@vaadin/vaadin-menu-bar": "1.2.1",
"@vaadin/vaadin-notification": "1.6.0",
"@vaadin/vaadin-ordered-layout": "1.4.0",
"@vaadin/vaadin-progress-bar": "1.3.0",
"@vaadin/vaadin-select": "2.4.0",
"@vaadin/vaadin-split-layout": "4.3.0",
"@vaadin/vaadin-text-field": "2.8.2",
"@vaadin/form": "./target/flow-frontend/form",
"@vaadin/vaadin-avatar": "1.0.3",
"open": "^7.2.1",
"@vaadin/vaadin-crud": "1.3.0",
"@vaadin/vaadin-cookie-consent": "1.2.0",
"@vaadin/vaadin-upload": "4.4.1",
"@vaadin/vaadin-board": "2.2.0",
"@vaadin/vaadin-date-time-picker": "1.4.0",
"@vaadin/vaadin-login": "1.2.0",
"@vaadin/vaadin-accordion": "1.2.0",
"@vaadin/vaadin-checkbox": "2.5.0",
"@vaadin/vaadin-time-picker": "2.4.0",
"@vaadin/vaadin-context-menu": "4.5.0",
"@vaadin/vaadin-tabs": "3.2.0",
"@vaadin/vaadin-radio-button": "1.5.1",
"@vaadin/vaadin-rich-text-editor": "1.3.0",
"lit-element": "2.3.1",
"@vaadin/vaadin-core-shrinkwrap": "18.0.5",
"@vaadin/vaadin-grid-pro": "2.2.2",
"@vaadin/vaadin-shrinkwrap": "18.0.5",
"@vaadin/vaadin-date-picker": "4.4.1"
},
"devDependencies": {
"@types/validator": "13.1.0",
"awesome-typescript-loader": "5.2.1",
"chokidar": "^3.4.0",
"compression-webpack-plugin": "4.0.1",
"copy-webpack-plugin": "5.1.2",
"css-loader": "4.2.1",
"extract-loader": "5.1.0",
"html-webpack-plugin": "3.2.0",
"lit-css-loader": "0.0.4",
"lit-element": "^2.3.1",
"lit-html": "1.2.1",
"progress-webpack-plugin": "0.0.24",
"raw-loader": "4.0.0",
"script-ext-html-webpack-plugin": "2.1.4",
"terser": "4.6.7",
"typescript": "4.0.3",
"validator": "13.1.17",
"webpack": "4.42.0",
"webpack-babel-multi-target-plugin": "2.3.3",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0",
"webpack-merge": "4.2.2"
},
"vaadin": {
"dependencies": {
"lit-element": "2.3.1",
"@vaadin/router": "1.7.2",
"@polymer/polymer": "3.2.0",
"@webcomponents/webcomponentsjs": "^2.2.10",
"@vaadin/vaadin-grid": "5.7.7",
"@vaadin/vaadin-icons": "4.3.2",
"@vaadin/vaadin-split-layout": "4.3.0",
"@vaadin/vaadin-combo-box": "5.4.7",
"@vaadin/vaadin-core-shrinkwrap": "18.0.5",
"@vaadin/vaadin-upload": "4.4.1",
"@vaadin/vaadin-dialog": "2.5.2",
"@vaadin/vaadin-select": "2.4.0",
"@vaadin/vaadin-app-layout": "2.2.0",
"@vaadin/vaadin-item": "2.3.0",
"@vaadin/vaadin-notification": "1.6.0",
"@vaadin/vaadin-progress-bar": "1.3.0",
"@vaadin/vaadin-date-time-picker": "1.4.0",
"@vaadin/vaadin-ordered-layout": "1.4.0",
"@vaadin/vaadin-login": "1.2.0",
"@vaadin/vaadin-button": "2.4.0",
"@vaadin/vaadin-date-picker": "4.4.1",
"@vaadin/vaadin-text-field": "2.8.2",
"@vaadin/vaadin-menu-bar": "1.2.1",
"@vaadin/vaadin-custom-field": "1.3.0",
"@vaadin/vaadin-form-layout": "2.3.0",
"@vaadin/vaadin-accordion": "1.2.0",
"@polymer/iron-list": "3.1.0",
"@vaadin/vaadin-confirm-dialog": "1.3.0",
"@vaadin/vaadin-list-box": "1.4.0",
"@vaadin/vaadin-checkbox": "2.5.0",
"@vaadin/vaadin-details": "1.2.0",
"@polymer/iron-icon": "3.0.1",
"@vaadin/vaadin-context-menu": "4.5.0",
"@vaadin/vaadin-lumo-styles": "1.6.0",
"@vaadin/vaadin-material-styles": "1.3.2",
"@vaadin/vaadin-custom-field": "1.3.0",
"lit-element": "2.3.1",
"@vaadin/vaadin-avatar": "1.0.3",
"open": "^7.2.1",
"@vaadin/vaadin-crud": "1.3.0",
"@vaadin/vaadin-cookie-consent": "1.2.0",
"@vaadin/vaadin-core-shrinkwrap": "18.0.5",
"@vaadin/vaadin-upload": "4.4.1",
"@vaadin/vaadin-board": "2.2.0",
"@vaadin/vaadin-charts": "7.0.0",
"@vaadin/vaadin-grid-pro": "2.2.2",
"@vaadin/vaadin-shrinkwrap": "18.0.5",
"@vaadin/vaadin-date-time-picker": "1.4.0",
"@vaadin/vaadin-login": "1.2.0",
"@vaadin/vaadin-date-picker": "4.4.1",
"@vaadin/vaadin-accordion": "1.2.0",
"@vaadin/vaadin-checkbox": "2.5.0",
"@vaadin/vaadin-time-picker": "2.4.0",
"@vaadin/vaadin-avatar": "1.0.3",
"@vaadin/vaadin-context-menu": "4.5.0",
"@vaadin/vaadin-tabs": "3.2.0",
"@vaadin/vaadin-radio-button": "1.5.1",
"@vaadin/vaadin-rich-text-editor": "1.3.0"
"@vaadin/vaadin-lumo-styles": "1.6.0",
"@vaadin/vaadin-material-styles": "1.3.2",
"open": "^7.2.1"
},
"devDependencies": {
"webpack-babel-multi-target-plugin": "2.3.3",
"copy-webpack-plugin": "5.1.2",
"compression-webpack-plugin": "4.0.1",
"raw-loader": "4.0.0",
"webpack-cli": "3.3.11",
"css-loader": "4.2.1",
"script-ext-html-webpack-plugin": "2.1.4",
"validator": "13.1.17",
"awesome-typescript-loader": "5.2.1",
"lit-css-loader": "0.0.4",
"lit-html": "1.2.1",
"@types/validator": "13.1.0",
"copy-webpack-plugin": "5.1.2",
"lit-element": "2.3.1",
"webpack": "4.42.0",
"html-webpack-plugin": "3.2.0",
"script-ext-html-webpack-plugin": "2.1.4",
"awesome-typescript-loader": "5.2.1",
"chokidar": "^3.4.0",
"typescript": "4.0.3",
"webpack-merge": "4.2.2",
"webpack-dev-server": "3.11.0",
"terser": "4.6.7",
"progress-webpack-plugin": "0.0.24",
"lit-element": "2.3.1",
"chokidar": "^3.4.0",
"validator": "13.1.17",
"lit-html": "1.2.1",
"@types/validator": "13.1.0",
"css-loader": "4.2.1",
"lit-css-loader": "0.0.4",
"extract-loader": "5.1.0"
},
"hash": "04462da9d778f9542e7732e145ac4b9dbdea38fe120e57367afe34d62fd3024a"
"hash": "8a8bb65418f58834b30cd258cd47da52573731720ea8967d4078487cb1253498"
},
"dependencies": {
"lit-element": "2.3.1",
"@vaadin/router": "1.7.2",
"@polymer/polymer": "3.2.0",
"@vaadin/flow-frontend": "./target/flow-frontend",
"@vaadin/form": "./target/flow-frontend/form",
"@vaadin/vaadin-grid": "5.7.7",
"@vaadin/vaadin-icons": "4.3.2",
"@vaadin/vaadin-split-layout": "4.3.0",
"@vaadin/vaadin-combo-box": "5.4.7",
"@vaadin/vaadin-core-shrinkwrap": "18.0.5",
"@vaadin/vaadin-upload": "4.4.1",
"@vaadin/vaadin-dialog": "2.5.2",
"@vaadin/vaadin-select": "2.4.0",
"@vaadin/vaadin-app-layout": "2.2.0",
"@vaadin/vaadin-item": "2.3.0",
"@vaadin/vaadin-notification": "1.6.0",
"@vaadin/vaadin-progress-bar": "1.3.0",
"@vaadin/vaadin-date-time-picker": "1.4.0",
"@vaadin/vaadin-ordered-layout": "1.4.0",
"@vaadin/vaadin-login": "1.2.0",
"@vaadin/vaadin-button": "2.4.0",
"@vaadin/vaadin-date-picker": "4.4.1",
"@vaadin/vaadin-text-field": "2.8.2",
"@vaadin/vaadin-menu-bar": "1.2.1",
"@vaadin/vaadin-custom-field": "1.3.0",
"@vaadin/vaadin-form-layout": "2.3.0",
"@vaadin/vaadin-accordion": "1.2.0",
"@polymer/iron-list": "3.1.0",
"@vaadin/vaadin-list-box": "1.4.0",
"@vaadin/vaadin-checkbox": "2.5.0",
"@vaadin/vaadin-details": "1.2.0",
"@polymer/iron-icon": "3.0.1",
"@vaadin/vaadin-time-picker": "2.4.0",
"@vaadin/vaadin-avatar": "1.0.3",
"@vaadin/vaadin-context-menu": "4.5.0",
"@vaadin/vaadin-tabs": "3.2.0",
"@vaadin/vaadin-radio-button": "1.5.1",
"@vaadin/vaadin-lumo-styles": "1.6.0",
"@vaadin/vaadin-material-styles": "1.3.2",
"open": "^7.2.1"
},
"devDependencies": {
"compression-webpack-plugin": "4.0.1",
"webpack-cli": "3.3.11",
"css-loader": "4.2.1",
"script-ext-html-webpack-plugin": "2.1.4",
"validator": "13.1.17",
"awesome-typescript-loader": "5.2.1",
"lit-css-loader": "0.0.4",
"lit-html": "1.2.1",
"@types/validator": "13.1.0",
"copy-webpack-plugin": "5.1.2",
"lit-element": "2.3.1",
"webpack": "4.42.0",
"html-webpack-plugin": "3.2.0",
"chokidar": "^3.4.0",
"typescript": "4.0.3",
"webpack-merge": "4.2.2",
"webpack-dev-server": "3.11.0",
"extract-loader": "5.1.0"
}
}

1403
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

13
src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java
View File

@ -1,9 +1,8 @@
package edu.kit.typicalc.view.content.infocontent;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteAlias;
@ -13,23 +12,17 @@ import edu.kit.typicalc.view.main.MathjaxDisplay;
@Route(value = "home", layout = MainViewImpl.class)
@PageTitle("Typicalc")
@RouteAlias(value = "", layout = MainViewImpl.class)
@JsModule("./src/mathjax-setup.js")
public class StartPageView extends VerticalLayout {
private TextArea name;
private Button sayHello;
public StartPageView() {
// todo implement correctly
setId("start-page");
name = new TextArea("translation test");
name.setValue(getTranslation("abs-rule"));
name.setWidthFull();
add(new MathjaxDisplay());
sayHello = new Button("Say hello");
add(name, sayHello);
sayHello.addClickListener(e -> {
Notification.show("Hello " + name.getValue());
});
add(sayHello);
}
}

2
src/main/java/edu/kit/typicalc/view/main/MathjaxDisplay.java
View File

@ -16,7 +16,7 @@ public class MathjaxDisplay extends LitTemplate {
* Creates the hello world template.
*/
public MathjaxDisplay() {
content.add("testtestetstest");
content.add(getTranslation("abs-rule"));
}
}

30
src/main/java/edu/kit/typicalc/view/main/UpperBar.java
View File

@ -1,14 +1,42 @@
package edu.kit.typicalc.view.main;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.i18n.LocaleChangeEvent;
import com.vaadin.flow.i18n.LocaleChangeObserver;
import edu.kit.typicalc.view.content.infocontent.StartPageView;
@CssImport("./styles/view/main/upper-bar.css")
public class UpperBar extends HorizontalLayout implements LocaleChangeObserver {
private final H1 viewTitle;
private final InputBar inputBar;
private final Icon helpDialogIcon;
public UpperBar() {
//TODO implement
setId("header");
getThemeList().set("dark", true);
setWidthFull();
setSpacing(false);
setAlignItems(FlexComponent.Alignment.CENTER);
add(new DrawerToggle());
this.viewTitle = new H1(getTranslation("root.typicalc"));
viewTitle.setId("viewTitle");
this.inputBar = new InputBar();
this.helpDialogIcon = new Icon(VaadinIcon.QUESTION_CIRCLE);
helpDialogIcon.setId("icon");
viewTitle.addClickListener(event -> this.getUI().get().navigate(StartPageView.class));
add(viewTitle, inputBar, helpDialogIcon);
}
private void createHelpDialog() {
//TODO create help dialog here --> maybe move to separate class if too big
}
@Override

3
src/main/resources/language/translation_de.properties
View File

@ -1,5 +1,6 @@
root.close=Schließen
root.copyLatex=Kopiere Latex-Code
root.typicalc=Typicalc
abs-rule=\\begin{prooftree}\
\\AxiomC{$\\Gamma=\\vdash t_1 : \\tau_1 \\rightarrow \\tau_2$}\
@ -9,5 +10,3 @@ abs-rule=\\begin{prooftree}\
\\LeftLabel{APP}\
\\BinaryInfC{$\\Gamma \\vdash t_1 \\ t_2 : \\tau_2$}\
\\end{prooftree}
test=hello world

8
src/main/resources/language/translation_en.properties
View File

@ -1,3 +1,7 @@
root.close=Close
root.copyLatex=Copy latex code
root.typicalc=Typicalc
abs-rule=\
\\begin{prooftree}\n\
\\AxiomC{$\\Gamma=\\vdash t_1 : \\tau_1 \\rightarrow \\tau_2$}\n\
@ -6,7 +10,3 @@ abs-rule=\
\\LeftLabel{APP}\n\
\\BinaryInfC{$\\Gamma \\vdash t_1 \\ t_2 : \\tau_2$}\n\
\\end{prooftree}
test=hello world
root.close=Close
root.copyLatex=Copy latex code