Commit c2514d25 authored by Olivier Masson's avatar Olivier Masson
Browse files

Update DiploLine.vue

parent 48c706b7
......@@ -25,6 +25,21 @@ export default Vue.extend({
this.$parent.appendLine();
if (this.line.currentTrans) this.setElContent(this.line.currentTrans.content);
}.bind(this));
// load colors, regarding user profile and/or region types
let beSettings = userProfile.get("baseline-editor-" + this.$store.state.document.id) || {};
this.regionColors = beSettings["color-regions"] || {}; // if a coloring attribute exists, will use it
this.regionTypes = this.$store.state.document.types.regions.map((t) => t.name);
// or, create region colors using the same algorithm than for segmentation panel for regions:
let basicColor = '#11FF76'; // same value used from baseline-editor.js
for (let index in this.regionTypes) {
let type = this.regionTypes[index];
if (this.regionColors[type] == null) {
this.regionColors[type] = this.changeHue(basicColor, 3*(index+1));
}
}
},
beforeDestroy() {
let el = this.getEl();
......@@ -54,13 +69,204 @@ export default Vue.extend({
setElContent(content) {
let line = this.getEl();
if (line) line.textContent = content;
// additional code to set/display background-colors when some lines are linked to some specific region type:
let regionType = this.getRegionType(); // return the string of the type / null when no region linked
if(regionType != null){
let rgb = this.regionColors[regionType];
let r = rgb[0];
let g = rgb[1];
let b = rgb[2];
let hexa = this.rgb2hex(r,g,b);
let cmyk = this.rgb2cmyk(r,g,b);
cmyk = 'cmyk('+cmyk.c+', '+cmyk.m+', '+cmyk.y+', '+cmyk.k+')'; // would give better results and nearest to svg colors but not working
rgb = "rgb("+r+"," +g+ ","+b+")";
// desaturate colors: more suitable for backgrounuds when reading
let sat = 0.6;
var gray = r * 0.3086 + g * 0.6094 + b * 0.0820;
r = Math.round(r * sat + gray * (1-sat));
g = Math.round(g * sat + gray * (1-sat));
b = Math.round(b * sat + gray * (1-sat));
let rgba = "rgba("+r+"," +g+ ","+b+", 0.2)";
line.style.backgroundColor = rgba; // possible values: hexa,rgb,rgba (allows opacity),(cmyk)
// to display the region type by the nav when mouseoverring: -
// - could next do this in a more accurate way:
// maybe display a semi-transparent fixed div, disappearing after few second and reappearing when scrolling, for example -
line.title = regionType;
}
},
getRegion() {
return this.$store.state.regions.all.findIndex(r => r.pk == this.line.region);
},
getRegionType() {
let regions = this.$store.state.regions.all;
for(var i = 0; i < regions.length; i++)
{
var r = regions[i];
if(r.pk == this.line.region){
return r.type;
}
}
return null; // no linked region type has been found
},
// coloring computation methods (one sample from basline-editor methods):
changeHue(rgb, degree) {
// exepcts a string and returns an object
function rgbToHSL(rgb) {
// strip the leading # if it's there
rgb = rgb.replace(/^\s*#|\s*$/g, '');
// convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
if(rgb.length == 3){
rgb = rgb.replace(/(.)/g, '$1$1');
}
var r = parseInt(rgb.substr(0, 2), 16) / 255,
g = parseInt(rgb.substr(2, 2), 16) / 255,
b = parseInt(rgb.substr(4, 2), 16) / 255,
cMax = Math.max(r, g, b),
cMin = Math.min(r, g, b),
delta = cMax - cMin,
l = (cMax + cMin) / 2,
h = 0,
s = 0;
if (delta == 0) {
h = 0;
}
else if (cMax == r) {
h = 60 * (((g - b) / delta) % 6);
}
else if (cMax == g) {
h = 60 * (((b - r) / delta) + 2);
}
else {
h = 60 * (((r - g) / delta) + 4);
}
if (delta == 0) {
s = 0;
}
else {
s = (delta/(1-Math.abs(2*l - 1)))
}
return {
h: h,
s: s,
l: l
}
}
// expects an object and returns a string
function hslToRGB(hsl) {
var h = hsl.h,
s = hsl.s,
l = hsl.l,
c = (1 - Math.abs(2*l - 1)) * s,
x = c * ( 1 - Math.abs((h / 60 ) % 2 - 1 )),
m = l - c/ 2,
r, g, b;
if (h < 60) {
r = c;
g = x;
b = 0;
}
else if (h < 120) {
r = x;
g = c;
b = 0;
}
else if (h < 180) {
r = 0;
g = c;
b = x;
}
else if (h < 240) {
r = 0;
g = x;
b = c;
}
else if (h < 300) {
r = x;
g = 0;
b = c;
}
else {
r = c;
g = 0;
b = x;
}
r = normalize_rgb_value(r, m);
g = normalize_rgb_value(g, m);
b = normalize_rgb_value(b, m);
// return rgb2hex(r,g,b);
return [r,g,b];
}
function normalize_rgb_value(color, m) {
color = Math.floor((color + m) * 255);
if (color < 0) {
color = 0;
}
return color;
}
var hsl = rgbToHSL(rgb);
hsl.h += degree;
if (hsl.h > 360) {
hsl.h -= 360;
}
else if (hsl.h < 0) {
hsl.h += 360;
}
return hslToRGB(hsl);
},
rgb2hex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
},
rgb2cmyk(r, g, b, normalized){
var c = 1 - (r / 255);
var m = 1 - (g / 255);
var y = 1 - (b / 255);
var k = Math.min(c, Math.min(m, y));
c = (c - k) / (1 - k);
m = (m - k) / (1 - k);
y = (y - k) / (1 - k);
if(!normalized){
c = Math.round(c * 10000) / 100;
m = Math.round(m * 10000) / 100;
y = Math.round(y * 10000) / 100;
k = Math.round(k * 10000) / 100;
}
c = isNaN(c) ? 0 : c;
m = isNaN(m) ? 0 : m;
y = isNaN(y) ? 0 : y;
k = isNaN(k) ? 0 : k;
return {
c: Math.round(c)+'%',
m: Math.round(m)+'%',
y: Math.round(y)+'%',
k: Math.round(k)+'%'
}
}
}
});
</script>
<style scoped>
</style>
\ No newline at end of file
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment