Align with changes in vue-components

package.json

@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "@openeo/js-client": "^1.3.2",
-    "@openeo/js-commons": "Open-EO/openeo-js-commons#dev",
-    "@openeo/js-processgraphs": "^1.1.0",
+    "@openeo/js-commons": "^1.3.0",
+    "@openeo/js-processgraphs": "^1.2.0",
     "@openeo/vue-components": "Open-EO/openeo-vue-components#model-builder",
     "ajv": "^6.12.6",
     "axios": "^0.21.1",

src/components/DiscoveryToolbar.vue

@@ -119,7 +119,7 @@ export default {
 	methods: {
 		onDrag(event, type, data) {
 			let node = this.getNode(type, data);
-			event.dataTransfer.setData("application/openeo-node", JSON.stringify(node));
+			event.dataTransfer.setData("application/vnd.openeo-node", JSON.stringify(node));
 			event.dataTransfer.setData("text/plain", JSON.stringify(node, null, 2));
 		},
 		showCollectionInfo(id) {

src/components/Editor.vue

@@ -1,7 +1,7 @@
 <template>
 	<Tabs class="editor" ref="tabs" id="customProcessContent" position="bottom">
 		<Tab id="visual" name="Visual Model" icon="fa-project-diagram" :selected="true" :allowShow="canSwitchView" @show="showModel">
-			<VisualEditor class="visualEditorTab" ref="graphBuilder" :editable="editable" :pgParameters="pgParameters" :value="modelValue" @input="commit" @error="onError" :title="title" :id="id + '_visual'" :showDiscoveryToolbar="showDiscoveryToolbar" :defaultValue="defaultValue">
+			<VisualEditor class="visualEditorTab" ref="graphBuilder" :editable="editable" :parent="parent" :parentSchema="parentSchema" :value="modelValue" @input="commit" @error="onError" :title="title" :id="id + '_visual'" :showDiscoveryToolbar="showDiscoveryToolbar" :defaultValue="defaultValue">
 				<template #file-toolbar><slot name="file-toolbar"></slot></template>
 				<template #toolbar><slot name="toolbar"></slot></template>
 			</VisualEditor>
@@ -43,9 +43,13 @@ export default {
 		title: {
 			type: String
 		},
-		pgParameters: {
-			type: Array,
-			default: () => []
+		parent: {
+			type: Object,
+			default: null
+		},
+		parentSchema: {
+			type: Object,
+			default: null
 		},
 		showDiscoveryToolbar: {
 			type: Boolean,

src/components/FullscreenButton.vue

@@ -12,7 +12,6 @@ export default {
 	name: 'FullscreenButton',
 	props: {
 		element: {
-			type: [String, Function, Object],
 			required: true
 		}
 	},

src/components/ImageViewer.vue

@@ -92,7 +92,7 @@ export default {
 		},
 		getPixelValue(event) {
 			try {
-				let size = Utils.domBoundingBox(this.$refs.canvas);
+				let size = this.$refs.canvas.getBoundingClientRect();
 				let xScale = this.img.naturalWidth / size.width;
 				let yScale = this.img.naturalHeight / size.height;
 				let x = event.offsetX * xScale;

src/components/LogViewer.vue

@@ -1,5 +1,8 @@
 <template>
-	<Logs class="log-viewer" :logs="logs" />
+	<div class="log-viewer">
+		<div v-if="logs === null" class="noDataMessage"><i class="fas fa-spinner fa-spin fa-lg"></i> Loading logs...</div>
+		<Logs v-else :logs="logs" />
+	</div>
 </template>
 
 <script>
@@ -108,7 +111,7 @@ export default {
 </script>
 
 <style>
-.vue-component .log-viewer {
+.log-viewer, .vue-component.logs {
 	width: 100%;
 	height: 100%;
 }

src/components/ParameterDataType.vue

@@ -29,7 +29,7 @@
 		<!-- GeoJSON -->
 		<MapGeoJsonEditor v-else-if="type === 'geojson'" v-model="state" :key="type" :id="name + '_geojson'" :editable="editable" class="geoJsonEditor"></MapGeoJsonEditor>
 		<!-- Process Editor -->
-		<Editor v-else-if="type === 'process-graph'" class="callbackEditor" :id="name" :editable="editable" :pgParameters="processParameters" :showDiscoveryToolbar="true" v-model="state" :defaultValue="editorDefaultValue" />
+		<Editor v-else-if="type === 'process-graph'" class="callbackEditor" :id="name" :editable="editable" :parent="parent" :parentSchema="schema" :showDiscoveryToolbar="true" v-model="state" :defaultValue="editorDefaultValue" />
 		<!-- Output format options -->
 		<FileFormatOptionsEditor v-else-if="type === 'output-format-options' || type === 'input-format-options'" ref="fileFormatOptionsEditor" :type="type" v-model="state" :format="dependency"></FileFormatOptionsEditor>
 		<!-- Budget -->
@@ -210,16 +210,6 @@ export default {
 				default:
 					return undefined;
 			}
-		},
-		processParameters() {
-			let callbackParams = this.schema.getCallbackParameters(); // higher prio
-			let parentParams = []; // lower prio;
-			if (Utils.isObject(this.parent) && typeof this.parent.getPgParameters === 'function') { // instead of "instanceof ModelBuilder" to avoid import
-				parentParams = this.parent.getPgParameters().map(block => block.spec);
-			}
-			let overridingParams = callbackParams.map(p => p.name);
-			let filteredParentParams = parentParams.filter(p => !overridingParams.includes(p.name));
-			return callbackParams.concat(filteredParentParams);
 		}
 	},
 	watch: {

src/components/VisualEditor.vue

@@ -31,7 +31,8 @@
 					:id="id"
 					:processes="processRegistry"
 					:collections="collections"
-					:pgParameters="pgParameters"
+					:parent="parent"
+					:parentSchema="parentSchema"
 					:value="value"
 					@input="commit"
 					@error="errorHandler"
@@ -79,9 +80,13 @@ export default {
 			type: Object,
 			default: () => null
 		},
-		pgParameters: {
-			type: Array,
-			default: () => []
+		parent: {
+			type: Object,
+			default: null
+		},
+		parentSchema: {
+			type: Object,
+			default: null
 		},
 		showDiscoveryToolbar: {
 			type: Boolean,
@@ -141,7 +146,7 @@ export default {
 		},
 
 		onDrop(event) {
-			var json = event.dataTransfer.getData("application/openeo-node");
+			var json = event.dataTransfer.getData("application/vnd.openeo-node");
 			if (json) {
 				event.preventDefault();
 				let node = JSON.parse(json);