v2.6.0

Autocomplete
Additive material
Fixed #55
Closes #47 float notation in molang

dist/plain-report.txt

@@ -1,15 +1,15 @@
-vue-color: 99.19 KB (4.61%)
-prismjs: 98.07 KB (4.56%)
-vue: 91.47 KB (4.25%)
-tinycolor2: 35.84 KB (1.67%)
-regenerator-runtime: 24.26 KB (1.13%)
-root: 21.3 KB (0.991%)
-style-loader: 13.1 KB (0.609%)
-setimmediate: 6.32 KB (0.294%)
-process: 5.29 KB (0.246%)
-css-loader: 2.21 KB (0.103%)
-timers-browserify: 1.97 KB (0.0918%)
-vue-prism-component: 1.69 KB (0.0787%)
-webpack: 472 B (0.0214%)
-@babel\runtime: 49 B (0.00223%)
-<self>: 1.71 MB (81.3%)
+vue-color: 99.19 KB (4.57%)
+prismjs: 98.07 KB (4.51%)
+vue: 91.47 KB (4.21%)
+tinycolor2: 35.84 KB (1.65%)
+root: 25.99 KB (1.20%)
+regenerator-runtime: 24.26 KB (1.12%)
+style-loader: 13.1 KB (0.603%)
+setimmediate: 6.32 KB (0.291%)
+process: 5.29 KB (0.244%)
+css-loader: 2.21 KB (0.102%)
+timers-browserify: 1.97 KB (0.0909%)
+vue-prism-component: 1.69 KB (0.0778%)
+webpack: 472 B (0.0212%)
+@babel\runtime: 49 B (0.00220%)
+<self>: 1.73 MB (81.3%)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "snowstorm",
-	"version": "2.5.0",
+	"version": "2.6.0",
 	"description": "Minecraft Bedrock Edition particle editor",
 	"author": {
 		"name": "JannisX11",
@@ -37,13 +37,13 @@
 	"dependencies": {
 		"bootstrap": "^4.5.3",
 		"fflate": "^0.7.3",
-		"molangjs": "^1.6.0",
+		"molangjs": "^1.6.1",
 		"prismjs": "^1.28.0",
 		"root": "github:JannisX11/vue-prism-editor",
 		"three": "^0.129.0",
 		"vue": "^2.6.12",
 		"vue-color": "^2.8.0",
 		"vue-prism-component": "^1.2.0",
-		"wintersky": "^1.2.0"
+		"wintersky": "^1.2.1"
 	}
 }

service_worker.js

@@ -1,4 +1,4 @@
-const cacheName = 'snowstorm_2.2.3';
+const cacheName = 'snowstorm_2.6.0';
 const staticAssets = [
 	'./index.html',
 	'./dist/app.js',

src/components/App.vue

@@ -46,15 +46,17 @@ if (!vscode) {
 	localStorage.setItem('snowstorm_startup_count', startup_count)
 }
 
+let portrait_view = document.body.clientWidth > 100 && document.body.clientWidth < 720
+
 function getInitialSidebarWidth() {
-	let {type, angle} = window.screen.orientation || {};
 	let body_width = document.body.clientWidth;
 	// Fix for VSCode
 	if (body_width < 100) body_width = 1280;
-	if (!type || type.includes('landscape')) {
-		return Math.clamp(body_width/2, 160, 440);
-	} else {
+
+	if (portrait_view) {
 		return body_width;
+	} else {
+		return Math.clamp(body_width/2, 160, 440);
 	}
 }
 
@@ -67,7 +69,7 @@ export default {
 		dialog: null,
 		showVSCodeInfoBox: (!vscode && [1, 3, 7, 11, 24].includes(startup_count)),
 		sidebar_width: getInitialSidebarWidth(),
-		portrait_view: window.screen.orientation && window.screen.orientation.type.includes('portrait'),
+		portrait_view,
 	}},
 	methods: {
 		setTab(tab) {

src/components/ExpressionBar.vue

@@ -1,12 +1,20 @@
 <template>
 	<div id="expression_bar">
-		<prism-editor v-model="code" :value="code" @input="updateInput($event, true)" :highlight="highlighter" :line-numbers="false" ref="input" />
+		<prism-editor v-model="code"
+			:value="code"
+			@input="updateInput($event, true)"
+			:autocomplete="autocomplete"
+			:highlight="highlighter"
+			:line-numbers="false"
+			ref="input"
+		/>
 	</div>
 </template>
 
 <script>
 import App from "./App";
 
+import getAutocompleteData from './../molang_autocomplete'
 import 'root/packages/vue-prism-editor/dist/prismeditor.min.css';
 import Prism from 'prismjs/components/prism-core';
 import {PrismEditor} from "root/packages/vue-prism-editor";
@@ -30,6 +38,9 @@ export default {
 		language: 'generic'
 	}},
 	methods: {
+		autocomplete(text, position) {
+			return getAutocompleteData(text, position, 'input')
+		},
 		highlighter() {
 			return Prism.highlight(this.code, Languages[this.language])
 		},
@@ -90,6 +101,5 @@ export {ExpandedInput}
 		font-family: var(--font-code);
 		outline: none;
 		padding: 5px 8px;
-		overflow-x: auto;
 	}
 </style>>

src/components/MenuBar.vue

@@ -1,6 +1,6 @@
 <template>
     <ul id="menu_bar">
-        <li v-for="menu in Menu" :key="menu.id">
+        <li v-for="menu in Menu" :key="menu.id" onclick="">
             <a>{{ menu.label }}</a>
             <ul class="menu_dropdown">
                 <li v-for="entry in menu.children" :key="entry.id" v-on:click="entry.click(getVM(), $event)">

src/components/Sidebar.vue

@@ -71,7 +71,7 @@ export default {
 	}
 	.input_subject {
 		border-right: 1px solid var(--color-border);
-		overflow-x: hidden;
+		overflow-x: visible;
 	}
 	.input_subject h3 {
 		background-color: var(--color-title);

src/components/Sidebar/InputGroup.vue

@@ -20,14 +20,15 @@
 				<ul class="input_list">
 					<li v-for="(item, index) in input.value" :key="index">
 						<!--Text-->
-						<div class="prism_editor_outer_wrapper" v-if="input.type == 'text' || input.type == 'molang'">
-							<prism-editor :highlight="input.type == 'molang' ? highlightMolang : highlightGeneric" language="" :line-numbers="false"
-								v-model="input.value[index]"
-								v-bind:placeholder="input.placeholder"
-								v-bind:index="index"
-								v-on:input="input.emitInput($event)"
-								v-on:focus="input.focus(index, $event)" />
-						</div>
+						<prism-editor :highlight="input.type == 'molang' ? highlightMolang : highlightGeneric" language="" :line-numbers="false"
+							v-if="input.type == 'text' || input.type == 'molang'"
+							v-model="input.value[index]"
+							v-bind:placeholder="input.placeholder"
+							v-bind:index="index"
+							:autocomplete="input.type == 'molang' ? autocomplete : null"
+							v-on:input="input.emitInput($event)"
+							v-on:focus="input.focus(index, $event)"
+						/>
 						<!--Number-->
 						<input
 							v-if="input.type == 'number'" type="number"
@@ -42,14 +43,15 @@
 
 				<template v-if="input.axis_count == 1">
 					<!--Text-->
-					<div class="prism_editor_outer_wrapper" v-if="input.type == 'text' || input.type == 'molang'">
-						<prism-editor :highlight="input.type == 'molang' ? highlightMolang : highlightGeneric" language="" :line-numbers="false"
-							v-model="input.value"
-							:value="input.value.toString()"
-							v-bind:placeholder="input.placeholder"
-							v-on:input="input.emitInput($event)"
-							v-on:focus="input.focus(-1, $event)" />
-					</div>
+					<prism-editor :highlight="input.type == 'molang' ? highlightMolang : highlightGeneric" language="" :line-numbers="false"
+						v-if="input.type == 'text' || input.type == 'molang'"
+						v-model="input.value"
+						:value="input.value.toString()"
+						v-bind:placeholder="input.placeholder"
+						:autocomplete="input.type == 'molang' ? autocomplete : null"
+						v-on:input="input.emitInput($event)"
+						v-on:focus="input.focus(-1, $event)"
+					/>
 					<!--Number-->
 					<input
 						v-if="input.type == 'number'" type="number"
@@ -65,8 +67,9 @@
 							<prism-editor :highlight="input.type == 'molang' ? highlightMolang : highlightGeneric"  :line-numbers="false"
 								v-model="input.value[i-1]"
 								:value="input.value[i-1].toString()"
-								v-bind:index="i-1"
-								v-bind:placeholder="input.placeholder"
+								:index="i-1"
+								:placeholder="input.placeholder"
+								:autocomplete="input.type == 'molang' ? autocomplete : null"
 								v-on:input="input.emitInput($event)"
 								v-on:focus="input.focus(i-1, $event)" />
 						</div>
@@ -78,7 +81,7 @@
 							:key="i"
 							v-model="input.value[i-1]"
 							:step="input.step" :min="input.min" :max="input.max"
-							v-bind:index="i-1"
+							:index="i-1"
 							v-on:input="input.change($event)">
 					</template>
 				</template>
@@ -124,7 +127,7 @@ import VueColor from 'vue-color'
 import Gradient from './Gradient';
 
 
-
+import getAutocompleteData from './../../molang_autocomplete'
 import 'root/packages/vue-prism-editor/dist/prismeditor.min.css';
 import Prism from 'prismjs/components/prism-core';
 import {PrismEditor} from "root/packages/vue-prism-editor";
@@ -163,6 +166,9 @@ export default {
 		highlightGeneric(code) {
 			return Prism.highlight(code, Languages.generic)
 		},
+		autocomplete(text, position) {
+			return getAutocompleteData(text, position, 'input')
+		},
 		toggleExpand(input) {
 			if (input.expandable) {
 				input.expanded = !input.expanded;
@@ -215,7 +221,7 @@ export default {
 	.input_list li {
 		margin: 2px 0;
 	}
-	ul.input_list input, ul.input_list .prism_editor_outer_wrapper {
+	ul.input_list input, ul.input_list .prism-editor-component {
 		width: calc(100% - 80px);
 		margin-left: 52px;
 		float: left;

src/css/common.css

@@ -60,6 +60,7 @@
 		margin: 0;
         padding: 0;
         box-sizing: border-box;
+		user-select: none;
 	}
 	input, select {
 		font-weight: inherit;
@@ -185,10 +186,9 @@
 .prism-editor-wrapper .prism-editor__editor, .prism-editor-wrapper .prism-editor__textarea {
 	white-space: pre;
 }
-.prism_editor_outer_wrapper {
+.prism-editor-component {
 	border: 1px solid var(--color-border);
 	width: 100%;
-	overflow-x: auto;
 }
 .prism-editor-wrapper textarea {
 	outline: none;
@@ -199,6 +199,24 @@
 .prism-editor-wrapper .prism-editor-wrapper {
 	overflow-y: hidden;
 }
+.prism-editor__autocomplete {
+	background-color: var(--color-interface);
+	border: 1px solid var(--color-border);
+	max-height: 220px;
+	padding-bottom: 10px;
+}
+.prism-editor__autocomplete > li {
+	padding: 3px 8px;
+	font-family: var(--font-code);
+}
+.prism-editor__autocomplete > li:hover {
+	color: var(--color-highlight);
+	background-color: var(--color-bar);
+}
+.prism-editor__autocomplete > li.selected {
+	color: var(--color-highlight);
+	background-color: var(--color-bar);
+}
 
 .prism-editor-wrapper pre .token.punctuation {
 	color: #5ba8c5

src/input_structure.js

@@ -127,7 +127,7 @@ const Data = {
 	emitter: {
 		label: 'Emitter',
 		rate: {
-			label: 'Rate',
+			label: 'Spawn Amount',
 			_folded: false,
 			inputs: {
 				mode: new Input({
@@ -215,7 +215,7 @@ const Data = {
 			}
 		},
 		shape: {
-			label: 'Shape',
+			label: 'Spawn Shape',
 			_folded: true,
 			inputs: {
 				mode: new Input({
@@ -290,8 +290,9 @@ const Data = {
 					info: 'Material to use for the particles',
 					label: 'Material',
 					options: {
-						particles_alpha: 'Alpha',
+						particles_alpha: 'Alpha Test',
 						particles_blend: 'Blend',
+						particles_add: 'Additive (1.19.60+)',
 						particles_opaque: 'Opaque',
 					},
 				}),