From 0cb09b92ecd8178ff18883197425621262b98730 Mon Sep 17 00:00:00 2001 From: Arne Keller Date: Wed, 3 Feb 2021 15:10:51 +0100 Subject: [PATCH] Increase size of SVG to 100% --- frontend/src/mathjax-setup.js | 18 ++++++++++++++++++ frontend/styles/view/proof-tree.css | 3 +++ frontend/styles/view/type-inference.css | 9 +++++++++ frontend/styles/view/unification.css | 3 +++ .../typeinferencecontent/MathjaxProofTree.java | 2 ++ .../MathjaxUnification.java | 2 ++ .../TypeInferenceView.java | 7 ++++++- .../language/translation_de.properties | 2 +- .../language/translation_en.properties | 1 + 9 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 frontend/styles/view/proof-tree.css create mode 100644 frontend/styles/view/type-inference.css create mode 100644 frontend/styles/view/unification.css diff --git a/frontend/src/mathjax-setup.js b/frontend/src/mathjax-setup.js index e597bd4..1a3f89c 100644 --- a/frontend/src/mathjax-setup.js +++ b/frontend/src/mathjax-setup.js @@ -85,6 +85,24 @@ window.MathJax = { const OutputJax = startup.getOutputJax(); const html = mathjax.document(root, {InputJax, OutputJax}); html.render(); + if (root.querySelector("#style-fixes") == null) { + const style = document.createElement('style'); + style.type = "text/css"; + style.innerHTML = "\ +mjx-doc, mjx-body, mjx-container, #tc-content, svg {\ + height: 100%;\ +}\ +mjx-container {\ + margin: 0 !important;\ +}\ + "; + console.log(root.host.tagName); + if (root.host.tagName === "TC-PROOF-TREE") { + style.innerHTML += "svg { width: 100%; }"; + } + style.id = "style-fixes"; + root.querySelector("mjx-head").appendChild(style); + } const svg = root.querySelector("svg"); const nodeIterator = svg.querySelectorAll("g[data-mml-node='mtr']"); let counter = 0; diff --git a/frontend/styles/view/proof-tree.css b/frontend/styles/view/proof-tree.css new file mode 100644 index 0000000..5c30454 --- /dev/null +++ b/frontend/styles/view/proof-tree.css @@ -0,0 +1,3 @@ +tc-proof-tree { + flex: auto; +} \ No newline at end of file diff --git a/frontend/styles/view/type-inference.css b/frontend/styles/view/type-inference.css new file mode 100644 index 0000000..cd1e377 --- /dev/null +++ b/frontend/styles/view/type-inference.css @@ -0,0 +1,9 @@ +#scroller { + width: 100%; + height: 100%; +} +#content { + display: flex; + flex-direction: column; + height: 100%; +} \ No newline at end of file diff --git a/frontend/styles/view/unification.css b/frontend/styles/view/unification.css new file mode 100644 index 0000000..adac234 --- /dev/null +++ b/frontend/styles/view/unification.css @@ -0,0 +1,3 @@ +tc-unification { + flex: initial; +} \ No newline at end of file diff --git a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxProofTree.java b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxProofTree.java index ce0c806..bd1704d 100644 --- a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxProofTree.java +++ b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxProofTree.java @@ -2,6 +2,7 @@ package edu.kit.typicalc.view.content.typeinferencecontent; import com.vaadin.flow.component.ClientCallable; import com.vaadin.flow.component.Tag; +import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.dependency.JsModule; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.littemplate.LitTemplate; @@ -16,6 +17,7 @@ import edu.kit.typicalc.view.MathjaxAdapter; @Tag("tc-proof-tree") @JsModule("./src/mathjax-adapter.ts") @JsModule("./src/mathjax-proof-tree.ts") +@CssImport("./styles/view/proof-tree.css") public class MathjaxProofTree extends LitTemplate implements MathjaxAdapter { private int stepCount = -1; diff --git a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxUnification.java b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxUnification.java index 490170f..2877560 100644 --- a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxUnification.java +++ b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxUnification.java @@ -1,6 +1,7 @@ package edu.kit.typicalc.view.content.typeinferencecontent; import com.vaadin.flow.component.Tag; +import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.dependency.JsModule; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.littemplate.LitTemplate; @@ -14,6 +15,7 @@ import edu.kit.typicalc.view.MathjaxAdapter; @Tag("tc-unification") @JsModule("./src/mathjax-adapter.ts") @JsModule("./src/mathjax-unification.ts") +@CssImport("./styles/view/unification.css") public class MathjaxUnification extends LitTemplate implements MathjaxAdapter { private final String[] latex; diff --git a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java index d0f094b..1f355fa 100644 --- a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java +++ b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java @@ -2,6 +2,7 @@ package edu.kit.typicalc.view.content.typeinferencecontent; import com.vaadin.flow.component.AttachEvent; import com.vaadin.flow.component.ComponentEventListener; +import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.orderedlayout.Scroller; import com.vaadin.flow.component.orderedlayout.VerticalLayout; @@ -14,8 +15,11 @@ import edu.kit.typicalc.view.main.MainViewImpl; @Route(value = "visualize", layout = MainViewImpl.class) @PageTitle("TypeInferenceView") +@CssImport("./styles/view/type-inference.css") public class TypeInferenceView extends VerticalLayout implements ControlPanelView, ComponentEventListener { + private static final String SCROLLER_ID = "scroller"; + private static final String CONTENT_ID = "content"; private int currentStep = 0; @@ -31,9 +35,10 @@ public class TypeInferenceView extends VerticalLayout setSizeFull(); addAttachListener(this); content = new Div(); + content.setId(CONTENT_ID); controlPanel = new ControlPanel(this, this); Scroller scroller = new Scroller(content); - scroller.setSizeFull(); + scroller.setId(SCROLLER_ID); scroller.setScrollDirection(Scroller.ScrollDirection.BOTH); setAlignItems(Alignment.CENTER); add(scroller, controlPanel); diff --git a/src/main/resources/language/translation_de.properties b/src/main/resources/language/translation_de.properties index 5c8dbcb..4644483 100644 --- a/src/main/resources/language/translation_de.properties +++ b/src/main/resources/language/translation_de.properties @@ -8,7 +8,7 @@ root.operatingHelp=Bedienhilfen root.inputSyntax=Eingabe Syntax root.inferenceRules=Ableitungsregeln root.absRule=Abs-Regel -root.overlongInput=Die maximale Länge der Eingabe beträgt 1000 Zeichen! +root.overlongInput=Die maximale Länge der Eingabe beträgt 1000 Zeichen! abs-rule=\ \\begin{prooftree}\ diff --git a/src/main/resources/language/translation_en.properties b/src/main/resources/language/translation_en.properties index 24ed62d..f8a51e7 100644 --- a/src/main/resources/language/translation_en.properties +++ b/src/main/resources/language/translation_en.properties @@ -3,6 +3,7 @@ root.copyLatex=Copy latex code root.typicalc=Typicalc root.examplebutton=📂 root.selectExample=Select example: +root.inferenceRules=Inference Rules root.typeInfer=Type abs-rule=\