feat(editor-ui): JSON mapping (#4270)
* refactor(editor-ui): update 'vue-json-pretty' and adjust component to preserve same behaviour (#4152) * fix(editor-ui): export interface to solve 'TS4082: Default export of the module has or is using private name' error temporarily * refactor(editor-ui): update 'vue-json-pretty' and adjust component to preserve same behaviour * refactor(editor-ui): move json data view into its own component (#4158) * refactor(editor-ui): move json data view into its own component * fix(editor-ui): make JSON data component work again * fix(editor-ui): JSON data component type issues * fix(editor-ui): JSON data component prop 'inputData' * refactor(editor-ui): rename helper function * fix(editor-ui): add declaration to `vue-json-pretty` component * refactor(editor-ui): JSON mapping move more logic to new component * refactor(editor-ui): some cleanup in JSON mapping component * refactor(editor-ui): changing key mapping translation * refactor(editor-ui): add basic drag'n'drop functionality to JSON view * refactor(editor-ui): moving JSON view actions into separate components * fix(editor-ui): JSON view action copy default selected path * fix(editor-ui): refactor draggable to play nicer with other (3rd party) components * fix(editor-ui): improve draggable performance * fix(editor-ui): add disable user selection class to body * fix(editor-ui): reduce click handler cognitive load in JSON view copy actions * fix(editor-ui): JSON view mapped path * fix(editor-ui): remove unnecessary wrapper around RunDataTable.vue * fix(editor-ui): respect input node distance when json parameter path is copied * fix(editor-ui): JSON mapping property highlight * fix(editor-ui): block event only on mousemove for draggable to not select content * refactor(editor-ui): fixing prop types and organising imports * fix(editor-ui): JSON view use double quotes where appropriate * fix(editor-ui): fix new package additions after merge conflict * fix(editor-ui): fix package update after merge conflict * fix(editor-ui): JSON view prop names text break * fix(editor-ui): use kebab-case name for component * fix(editor-ui): calling convertPath on draggable node path * feat(editor-ui): add mapping discoverability tooltip to mappable inputs (#4227) * refactor(editor-ui): move json data view into its own component * fix(editor-ui): make JSON data component work again * fix(editor-ui): JSON data component type issues * fix(editor-ui): JSON data component prop 'inputData' * refactor(editor-ui): rename helper function * fix(editor-ui): add declaration to `vue-json-pretty` component * refactor(editor-ui): JSON mapping move more logic to new component * refactor(editor-ui): some cleanup in JSON mapping component * refactor(editor-ui): changing key mapping translation * refactor(editor-ui): add basic drag'n'drop functionality to JSON view * refactor(editor-ui): moving JSON view actions into separate components * fix(editor-ui): JSON view action copy default selected path * fix(editor-ui): refactor draggable to play nicer with other (3rd party) components * fix(editor-ui): improve draggable performance * fix(editor-ui): add disable user selection class to body * fix(editor-ui): reduce click handler cognitive load in JSON view copy actions * fix(editor-ui): JSON view mapped path * fix(editor-ui): remove unnecessary wrapper around RunDataTable.vue * fix(editor-ui): respect input node distance when json parameter path is copied * fix(editor-ui): JSON mapping property highlight * fix(editor-ui): block event only on mousemove for draggable to not select content * refactor(editor-ui): fixing prop types and organising imports * fix(editor-ui): JSON view use double quotes where appropriate * fix(editor-ui): fix new package additions after merge conflict * fix(editor-ui): fix package update after merge conflict * fix(editor-ui): JSON view prop names text break * fix(editor-ui): update helper after merge conflict * refactor(editor-ui): cleanup RunaDataTable tooltips * refactor(editor-ui): add temporary static tooltip to input with mapping * fix(editor-ui): input mapping tooltip proper input name * fix(editor-ui): show input mapping tooltip when conditions are met * fix(editor-ui): show different input mapping tooltip for different view types (table, json) * fix(editor-ui): drop lodash isEmpty * fix(editor-ui): using and keeping only getter function * fix(editor-ui): check `INodeExecutionData[]` array emptyness (still needs some improvement) * feat(editor-ui): add telemetry calls to data mapping (#4250) * fix(editor-ui): add types package for jsonpath * fix(editor-ui): JSON view drag'n'drop telemetry call * fix(editor-ui): add data mapping tooltip close telemetry to parameter input * fix(editor-ui): execute previous node tooltip linebreak * fix(editor-ui): input data mapping tooltip show-hide logic * fix(editor-ui): input data mapping tooltip position * fix(editor-ui): using a placeholder gif in mapping discoverability tooltip * refactor(design-system): adding optional configurable buttons to tooltip (#4260) * refactor(design-system): unbreaking wrapper around element ui tooltip * fix(design-system): update test snapshot * refactor(design-system): adding buttons to tooltip * fix(design-system): update test snapshot * fix(design-system): change tooltip props and some cleanup * fix(design-system): update test snapshot * chore: fix package lock file after merge * fix(editor-ui): modifications according to Max's review (#4273) * fix(editor-ui): modifications according to Max's review * fix(editor-ui): JSON prop names should not be written bold * fix(editor-ui): use proper animated gif in JSON data mapping discoverability tooltip
This commit is contained in:
Csaba Tuncsik
GitHub
@@ -27,6 +27,7 @@ import Vue from 'vue';
|
||||
import Teleport from 'vue2-teleport';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'draggable',
|
||||
components: {
|
||||
Teleport,
|
||||
},
|
||||
@@ -49,22 +50,22 @@ export default Vue.extend({
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const draggablePosition = {
|
||||
x: -100,
|
||||
y: -100,
|
||||
};
|
||||
|
||||
return {
|
||||
isDragging: false,
|
||||
draggablePosition: {
|
||||
x: -100,
|
||||
y: -100,
|
||||
},
|
||||
draggablePosition,
|
||||
draggingEl: null as null | HTMLElement,
|
||||
draggableStyle: {
|
||||
transform: `translate(${draggablePosition.x}px, ${draggablePosition.y}px)`,
|
||||
},
|
||||
animationFrameId: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
draggableStyle(): { top: string; left: string; } {
|
||||
return {
|
||||
top: `${this.draggablePosition.y}px`,
|
||||
left: `${this.draggablePosition.x}px`,
|
||||
};
|
||||
},
|
||||
canDrop(): boolean {
|
||||
return this.$store.getters['ui/canDraggableDrop'];
|
||||
},
|
||||
@@ -73,61 +74,65 @@ export default Vue.extend({
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onDragStart(e: DragEvent) {
|
||||
setDraggableStyle() {
|
||||
this.draggableStyle = {
|
||||
transform: `translate(${this.draggablePosition.x}px, ${this.draggablePosition.y}px)`,
|
||||
};
|
||||
},
|
||||
onDragStart(e: MouseEvent) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = e.target as HTMLElement;
|
||||
if (this.targetDataKey && target && target.dataset.target !== this.targetDataKey) {
|
||||
this.draggingEl = e.target as HTMLElement;
|
||||
if (this.targetDataKey && this.draggingEl && this.draggingEl.dataset.target !== this.targetDataKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.draggingEl = target;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.isDragging = true;
|
||||
|
||||
const data = this.targetDataKey ? target.dataset.value : (this.data || '');
|
||||
this.$store.commit('ui/draggableStartDragging', {type: this.type, data });
|
||||
|
||||
this.$emit('dragstart', this.draggingEl);
|
||||
document.body.style.cursor = 'grabbing';
|
||||
this.isDragging = false;
|
||||
this.draggablePosition = { x: e.pageX, y: e.pageY };
|
||||
this.setDraggableStyle();
|
||||
|
||||
window.addEventListener('mousemove', this.onDrag);
|
||||
window.addEventListener('mouseup', this.onDragEnd);
|
||||
|
||||
this.draggablePosition = { x: e.pageX, y: e.pageY };
|
||||
},
|
||||
onDrag(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if(!this.isDragging) {
|
||||
this.isDragging = true;
|
||||
|
||||
if (this.canDrop && this.stickyPosition) {
|
||||
this.draggablePosition = { x: this.stickyPosition[0], y: this.stickyPosition[1]};
|
||||
}
|
||||
else {
|
||||
this.draggablePosition = { x: e.pageX, y: e.pageY };
|
||||
const data = this.targetDataKey && this.draggingEl ? this.draggingEl.dataset.value : (this.data || '');
|
||||
this.$store.commit('ui/draggableStartDragging', {type: this.type, data });
|
||||
|
||||
this.$emit('dragstart', this.draggingEl);
|
||||
document.body.style.cursor = 'grabbing';
|
||||
}
|
||||
|
||||
this.$emit('drag', this.draggablePosition);
|
||||
this.animationFrameId = window.requestAnimationFrame(() => {
|
||||
if (this.canDrop && this.stickyPosition) {
|
||||
this.draggablePosition = { x: this.stickyPosition[0], y: this.stickyPosition[1]};
|
||||
} else {
|
||||
this.draggablePosition = { x: e.pageX, y: e.pageY };
|
||||
}
|
||||
this.setDraggableStyle();
|
||||
this.$emit('drag', this.draggablePosition);
|
||||
});
|
||||
},
|
||||
onDragEnd(e: MouseEvent) {
|
||||
onDragEnd() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
document.body.style.cursor = 'unset';
|
||||
window.removeEventListener('mousemove', this.onDrag);
|
||||
window.removeEventListener('mouseup', this.onDragEnd);
|
||||
window.cancelAnimationFrame(this.animationFrameId);
|
||||
|
||||
setTimeout(() => {
|
||||
this.$emit('dragend', this.draggingEl);
|
||||
@@ -149,10 +154,12 @@ export default Vue.extend({
|
||||
.draggable {
|
||||
position: fixed;
|
||||
z-index: 9999999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.draggable-data-transfer {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user