admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

⚡ Add shear option, resize with alpha color and fix bug

Browse Source
This commit is contained in:
Jan Oberhauser
2020-11-09 11:26:46 +01:00
parent 2cc6f6c218
commit 9fee42b2a8
3 changed files with 111 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/editor-ui/src/components/ParameterInput.vue
View File

@@ -82,8 +82,8 @@
</el-select>
<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
<el-color-picker :value="displayValue" :disabled="isReadOnly" @change="valueChanged" size="small" class="color-picker" @focus="setFocus" :title="displayTitle" ></el-color-picker>
<el-input v-model="tempValue" size="small" type="text" :value="displayValue" :disabled="isReadOnly" @change="valueChanged" @keydown.stop @focus="setFocus" :title="displayTitle" ></el-input>
<el-color-picker :value="displayValue" :disabled="isReadOnly" @change="valueChanged" size="small" class="color-picker" @focus="setFocus" :title="displayTitle" :show-alpha="getArgument('showAlpha')"></el-color-picker>
<el-input v-model="tempValue" size="small" type="text" :value="tempValue" :disabled="isReadOnly" @change="valueChanged" @keydown.stop @focus="setFocus" :title="displayTitle" ></el-input>
</div>
<div v-else-if="parameter.type === 'boolean'">
@@ -213,6 +213,10 @@ export default mixins(
this.loadRemoteParameterOptions();
},
value () {
if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true) {
// Do not set for color with alpha else wrong value gets displayed in field
return;
}
this.tempValue = this.displayValue as string;
},
},
@@ -274,6 +278,18 @@ export default mixins(
returnValue = this.expressionValueComputed;
}
if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') {
// Convert the value to rgba that el-color-picker can display it correctly
const bigint = parseInt(returnValue.slice(1), 16);
const h = [];
h.push((bigint >> 24) & 255);
h.push((bigint >> 16) & 255);
h.push((bigint >> 8) & 255);
h.push((255 - bigint & 255) / 255);
returnValue = 'rgba('+h.join()+')';
}
if (returnValue !== undefined && returnValue !== null && this.parameter.type === 'string') {
const rows = this.getArgument('rows');
if (rows === undefined || rows === 1) {
@@ -537,14 +553,35 @@ export default mixins(
// Set focus on field
setTimeout(() => {
// @ts-ignore
(this.$refs.inputField.$el.querySelector('input') as HTMLInputElement).focus();
if (this.$refs.inputField.$el) {
// @ts-ignore
(this.$refs.inputField.$el.querySelector('input') as HTMLInputElement).focus();
}
});
},
rgbaToHex (value: string): string | null {
// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
const valueMatch = (value as string).match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)$/);
if (valueMatch === null) {
// TODO: Display something if value is not valid
return null;
}
const [r, g, b, a] = valueMatch.splice(1, 4).map(v => Number(v));
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + ((1 << 8) + Math.floor((1-a)*255)).toString(16).slice(1);
},
valueChanged (value: string | number | boolean | Date | null) {
if (value instanceof Date) {
value = value.toISOString();
}
if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && value !== null && value.toString().charAt(0) !== '#') {
const newValue = this.rgbaToHex(value as string);
if (newValue !== null) {
this.tempValue = newValue;
value = newValue;
}
}
const parameterData = {
node: this.node !== null ? this.node.name : this.nodeName,
name: this.path,
@@ -570,6 +607,13 @@ export default mixins(
this.nodeName = this.node.name;
}
if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && this.displayValue !== null && this.displayValue.toString().charAt(0) !== '#') {
const newValue = this.rgbaToHex(this.displayValue as string);
if (newValue !== null) {
this.tempValue = newValue;
}
}
if (this.remoteMethod !== undefined && this.node !== null) {
// Make sure to load the parameter options
// directly and whenever the credentials change