feat(editor): Add input panel to NDV (#3204)
* refactor tabs out * refactor execute button * refactor header * add more views * fix error view * fix workflow rename bug * rename component * fix small screen bug * move items, fix positions * add hover state * show selector on empty state * add empty run state * fix binary view * 1 item * add vjs styles * show empty row for every item * refactor tabs * add branch names * fix spacing * fix up spacing * add run selector * fix positioning * clean up * increase width of selector * fix up spacing * fix copy button * fix branch naming; type issues * fix docs in custom nodes * add type * hide items when run selector is shown * increase selector size * add select prepend * clean up a bit * Add pagination * add stale icon * enable stale data in execution run * Revert "enable stale data in execution run" 8edb68dbffa0aa0d8189117e1a53381cb2c27608 * move metadata to its own state * fix smaller size * add scroll buttons * update tabs on resize * update stale data on rename * remove metadata on delete * hide x * change title colors * binary data classes * remove duplicate css * add colors * delete unused keys * use event bus * refactor header out * support different nodes * update selector * add immediate input * add branch overrides * split output input run index * clean up unnessary data * add missing keys * update key names * remove unnessary css/js * fix outputs panel * set max width on input selector * fix selector to show parent nodes * fix bug when switching between nodes * add linking and refactor * add linking * fix minor issues * hide linking when cannot link * fix type * fix error state * clean up import * fix linking edge cases * hide input panel for triggers * disable for start node * format file * refactor output panel * add empty input hint * update too much data view * update slot, message under branch * no input data view * add node not run/no output data views * add tooltip support on execute prev * fix spacing in view * address output views * fix run node hint view * fix spinner * center button * update message to use node name * update title of no output data message * implement loading states * fix sizes * fix sizes * update spinner * add wire me up image * update link * update panels design * fix unclickable area bug * revert change * fix clickable bg * fix up positioning * ensure bg is clickable * fix up borders * fix height * move border to wrapper * set box shadow * set box shadow * add drag button * add dragging for main panel * set max width of panels * set min width in js * keep showing drag while dragging * fix dragging leaving modal * update trigger position of main panel * move main panel position into store * clear metadata after changing workflow * center grid correctly * add drag arrows * add dragging hover * fix cursor behavior * update no output state * show last run on open * always set to latest run * fix padding * add I wish this node would * clean up unsued data * inject run info into run * refactor out drag button * fix dragging issue * fix arrow bug * increase width of panel * change run logic * set label font sizes * update radiobutton pos * address header issues * fix prev spacing bug * fix input order * set package lock * add close modal event * complete close modal event * add input change event * add dragging event * add event on view change * add page size event * rename event * add event on page change * add link click event * add linking event * rename var * add run change event * add button events * add branch event * add structure for open event * add input type * set session id * set sessionid/source for expression events * add params to expression events * make display modes global * add display mode to tracking * add more event tracking * add has_mapping param * make main panel position global * dedupe list * fix cursor while dragging * address feedback * reduce bottom scrim * remove empty option hint * add hint tooltip * add tritary button * update param names * update parameter buttons * center empty states * move feature request message * increase max width for inputs selector * fix error dispaly padding * remove immediate * refactor search logic to return object * fix console errors * fix console errors * add node distance * refactor how input nodes listed * remove console log * set package lock * refactor recursive logic * handle overrides * handle default case without inputs * fix bug width link * fix tabs arrow bug * handle binary data case * update node execution * fix merge logic * remove console log * delete func * update package lock * add hover area * switch first input node * keep recursive order * make breadth first traversal * fix overflow bug, add pluralization * update docs url * update drop shadow * set background color for button * update input * fix truncation * update index of input dropdown * fix binary background * update telemetry * fix binary data switching * check all parent connections for executed node * check current state for executing node * fix executing states * update loading states * use pluralization for items * rename modal * update pluralization * update package lock * update empty messagE * format file * refactor out dragging logic * refactor out dragging * add back panel position * add telemetry params * add survey url as const * remove extra space, add dot * rename tabs, update telemetery, fix telemetry bug * update execute prev button * rename workflow func * rename workflow func * delete unnessary component * fix build issue * add tests for workflow search * format + add tests * remove todo comment * update iconnection type to match workflows * Revert "update iconnection type to match workflows" 3772487d985f226acab7144c7672b5696deabb55 * update func comment * fix formatting issues * add tertiary story * add spinner story * remove todo comment * remove eslint check * update empty messagE
This commit is contained in:
Mutasem Aldmour
GitHub
215
packages/editor-ui/src/components/NDVDraggablePanels.vue
Normal file
215
packages/editor-ui/src/components/NDVDraggablePanels.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :class="$style.inputPanel" v-if="!isTriggerNode" :style="inputPanelStyles">
|
||||
<slot name="input"></slot>
|
||||
</div>
|
||||
<div :class="$style.outputPanel" :style="outputPanelStyles">
|
||||
<slot name="output"></slot>
|
||||
</div>
|
||||
<div :class="$style.mainPanel" :style="mainPanelStyles">
|
||||
<div :class="$style.dragButtonContainer" @click="close">
|
||||
<PanelDragButton
|
||||
:class="{ [$style.draggable]: true, [$style.visible]: isDragging }"
|
||||
v-if="!isTriggerNode"
|
||||
:canMoveLeft="canMoveLeft"
|
||||
:canMoveRight="canMoveRight"
|
||||
@dragstart="onDragStart"
|
||||
@drag="onDrag"
|
||||
@dragend="onDragEnd"
|
||||
/>
|
||||
</div>
|
||||
<slot name="main"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import PanelDragButton from './PanelDragButton.vue';
|
||||
|
||||
const MAIN_PANEL_WIDTH = 360;
|
||||
const SIDE_MARGIN = 24;
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'NDVDraggablePanels',
|
||||
components: {
|
||||
PanelDragButton,
|
||||
},
|
||||
props: {
|
||||
isTriggerNode: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
windowWidth: 0,
|
||||
isDragging: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setTotalWidth();
|
||||
window.addEventListener('resize', this.setTotalWidth);
|
||||
this.$emit('init', { position: this.getRelativePosition() });
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.setTotalWidth);
|
||||
},
|
||||
computed: {
|
||||
mainPanelPosition(): number {
|
||||
if (this.isTriggerNode) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const relativePosition = this.$store.getters['ui/mainPanelPosition'] as number;
|
||||
|
||||
return relativePosition * this.windowWidth;
|
||||
},
|
||||
inputPanelMargin(): number {
|
||||
return this.isTriggerNode ? 0 : 80;
|
||||
},
|
||||
minimumLeftPosition(): number {
|
||||
return SIDE_MARGIN + this.inputPanelMargin;
|
||||
},
|
||||
maximumRightPosition(): number {
|
||||
return this.windowWidth - MAIN_PANEL_WIDTH - this.minimumLeftPosition;
|
||||
},
|
||||
mainPanelFinalPositionPx(): number {
|
||||
const padding = this.minimumLeftPosition;
|
||||
let pos = this.mainPanelPosition + MAIN_PANEL_WIDTH / 2;
|
||||
pos = Math.max(padding, pos - MAIN_PANEL_WIDTH);
|
||||
pos = Math.min(pos, this.maximumRightPosition);
|
||||
|
||||
return pos;
|
||||
},
|
||||
canMoveLeft(): boolean {
|
||||
return this.mainPanelFinalPositionPx > this.minimumLeftPosition;
|
||||
},
|
||||
canMoveRight(): boolean {
|
||||
return this.mainPanelFinalPositionPx < this.maximumRightPosition;
|
||||
},
|
||||
mainPanelStyles(): { left: string } {
|
||||
return {
|
||||
left: `${this.mainPanelFinalPositionPx}px`,
|
||||
};
|
||||
},
|
||||
inputPanelStyles(): { width: string } {
|
||||
let width = this.mainPanelPosition - MAIN_PANEL_WIDTH / 2 - SIDE_MARGIN;
|
||||
width = Math.min(
|
||||
width,
|
||||
this.windowWidth - SIDE_MARGIN * 2 - this.inputPanelMargin - MAIN_PANEL_WIDTH,
|
||||
);
|
||||
width = Math.max(320, width);
|
||||
return {
|
||||
width: `${width}px`,
|
||||
};
|
||||
},
|
||||
outputPanelStyles(): { width: string } {
|
||||
let width = this.windowWidth - this.mainPanelPosition - MAIN_PANEL_WIDTH / 2 - SIDE_MARGIN;
|
||||
width = Math.min(
|
||||
width,
|
||||
this.windowWidth - SIDE_MARGIN * 2 - this.inputPanelMargin - MAIN_PANEL_WIDTH,
|
||||
);
|
||||
width = Math.max(320, width);
|
||||
return {
|
||||
width: `${width}px`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getRelativePosition() {
|
||||
const current = this.mainPanelFinalPositionPx + MAIN_PANEL_WIDTH / 2 - this.windowWidth / 2;
|
||||
|
||||
const pos = Math.floor(
|
||||
(current / ((this.maximumRightPosition - this.minimumLeftPosition) / 2)) * 100,
|
||||
);
|
||||
return pos;
|
||||
},
|
||||
onDragStart() {
|
||||
this.isDragging = true;
|
||||
this.$emit('dragstart', { position: this.getRelativePosition() });
|
||||
},
|
||||
onDrag(e: {x: number, y: number}) {
|
||||
const relativePosition = e.x / this.windowWidth;
|
||||
this.$store.commit('ui/setMainPanelRelativePosition', relativePosition);
|
||||
},
|
||||
onDragEnd() {
|
||||
setTimeout(() => {
|
||||
this.isDragging = false;
|
||||
this.$emit('dragend', {
|
||||
windowWidth: this.windowWidth,
|
||||
position: this.getRelativePosition(),
|
||||
});
|
||||
}, 0);
|
||||
},
|
||||
setTotalWidth() {
|
||||
this.windowWidth = window.innerWidth;
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
$--main-panel-width: 360px;
|
||||
|
||||
.dataPanel {
|
||||
position: absolute;
|
||||
height: calc(100% - 2 * var(--spacing-l));
|
||||
position: absolute;
|
||||
top: var(--spacing-l);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.inputPanel {
|
||||
composes: dataPanel;
|
||||
left: var(--spacing-l);
|
||||
|
||||
> * {
|
||||
border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
.outputPanel {
|
||||
composes: dataPanel;
|
||||
right: var(--spacing-l);
|
||||
width: $--main-panel-width;
|
||||
|
||||
> * {
|
||||
border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mainPanel {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
.draggable {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggable {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dragButtonContainer {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
width: $--main-panel-width;
|
||||
height: 12px;
|
||||
|
||||
&:hover .draggable {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user