Script editor now resizes with window

This commit is contained in:
Brendan Robert 2016-07-16 20:39:28 -05:00
parent 5e1e6a9173
commit 7be0683eb9
2 changed files with 45 additions and 9 deletions

View File

@ -1,11 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?> <?import javafx.scene.control.Menu?>
<?import javafx.scene.control.*?> <?import javafx.scene.control.MenuBar?>
<?import javafx.scene.layout.*?> <?import javafx.scene.control.MenuItem?>
<?import javafx.scene.web.*?> <?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.web.WebView?>
<AnchorPane id="AnchorPane" prefHeight="748.0" prefWidth="1024.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="org.badvision.outlaweditor.ui.MythosScriptEditorController"> <AnchorPane id="AnchorPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="748.0" prefWidth="1024.0" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.badvision.outlaweditor.ui.MythosScriptEditorController">
<!-- <stylesheets> <!-- <stylesheets>
<URL value="@/styles/mythosscripteditor.css"/> <URL value="@/styles/mythosscripteditor.css"/>
</stylesheets>--> </stylesheets>-->

View File

@ -11,7 +11,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"></meta> <meta charset="utf-8"></meta>
<title>Blockly Demo: Fixed Blockly</title> <title>MythOS Script Editor</title>
<script type="text/javascript" src="../../blockly_compressed.js"></script> <script type="text/javascript" src="../../blockly_compressed.js"></script>
<script type="text/javascript" src="../../blocks_compressed.js"></script> <script type="text/javascript" src="../../blocks_compressed.js"></script>
<script type="text/javascript" src="../../msg/js/en.js"></script> <script type="text/javascript" src="../../msg/js/en.js"></script>
@ -25,11 +25,26 @@
font-weight: normal; font-weight: normal;
font-size: 140%; font-size: 140%;
} }
html, body {
height: 100%;
margin: 0;
}
#blocklyArea {
min-height: 100%;
width: 100%;
height: 100%;
}
#blocklyDiv {
height: 700px;
width: 996px;
}
</style> </style>
</head> </head>
<body> <body>
<div id="blocklyDiv" style="height: 700px; width: 996px;"></div> <div id="blocklyArea">
<div id="blocklyDiv"></div>
</div>
<xml id="toolbox" style="display: none"> <xml id="toolbox" style="display: none">
<category id="variables" name="Variables"> <category id="variables" name="Variables">
<block type="variables_set"></block> <block type="variables_set"></block>
@ -487,9 +502,29 @@
</xml> </xml>
<script> <script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
Mythos.initBlocks(); Mythos.initBlocks();
Mythos.workspace = Blockly.inject(document.getElementById('blocklyDiv'), Mythos.workspace = Blockly.inject(blocklyDiv,
{path: '../../', toolbox: document.getElementById('toolbox'), sounds: false}); {path: '../../', toolbox: document.getElementById('toolbox'), sounds: false});
var onresize = function (e) {
// Compute the absolute coordinates and dimensions of blocklyArea.
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea.
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
};
window.addEventListener('resize', onresize, false);
onresize();
</script> </script>
</body> </body>