Skip to content

Commit

Permalink
fix: style of labels (background, border) (#16)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jledentu
jledentu authored May 2, 2024
1 parent 480ebad commit b87eba6
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 35 deletions.
26 changes: 17 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@
Adapt
</label>
</span>
<input class="form-control jscolor" value="FFFFFF" onchange="changeParam('borderColor', '#' + this.value)" id="borderColor">
<input class="form-control jscolor" value="FFFFFF" onchange="changeParam('borderColor', this.value)" id="borderColor">
<button class="form-control" onclick="clearColor('borderColor')">Clear</button>
</div>

<div class="input-group">
Expand All @@ -60,15 +61,16 @@
<label class="input-group-addon" for="lineColor">Background</label>
<span class="input-group-addon">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" checked name="lineColor" onchange="changeParam('backgroundColor', undefined)" value="left" id="backgroundColorCheckbox"/>
<input type="checkbox" class="form-check-input" checked name="backgroundColor" onchange="changeParam('backgroundColor', undefined)" value="left" id="backgroundColorCheckbox"/>
Adapt
</label>
</span>
<input class="form-control jscolor" value="transparent" onchange="changeParam('backgroundColor', '#' + this.value)" id="backgroundColor">
<input class="form-control jscolor" value="transparent" onchange="changeParam('backgroundColor', this.value)" id="backgroundColor">
<button class="form-control" onclick="clearColor('backgroundColor')">Clear</button>
</div>
<div class="input-group">
<span class="input-group-addon">Color</span>
<input class="form-control jscolor" value="FFFFFF" onchange="changeParam('color', '#' + this.value)">
<input class="form-control jscolor" value="FFFFFF" onchange="changeParam('color', this.value)">
</div>
<div class="input-group">
<label class="input-group-addon" for="lineColor">Align</label>
Expand Down Expand Up @@ -110,7 +112,8 @@
Adapt
</label>
</span>
<input class="form-control jscolor" value="000000" onchange="changeParam('lineColor', '#' + this.value)" id="lineColor">
<input class="form-control jscolor" value="000000" onchange="changeParam('lineColor', this.value)" id="lineColor">
<button class="form-control" onclick="clearColor('lineColor')">Clear</button>
</div>
<div class="input-group">
<label class="input-group-addon">Width</label>
Expand Down Expand Up @@ -207,7 +210,7 @@ <h5 class="modal-title" id="dataModelLabel">Data Set Editor</h5>
maxSize: 16
},
color: '#565656',
backgroundColor: 'red',
backgroundColor: 'transparent',
valuePrecision: 0,
percentPrecision: 2,
text: '%p\n%v',
Expand Down Expand Up @@ -312,20 +315,25 @@ <h5 class="modal-title" id="dataModelLabel">Data Set Editor</h5>
chart.update();
}

function clearColor(p) {
$('#' + p).val('transparent');
changeParam(p, 'transparent');
}

function changeParam(p, value) {
var arr = [
const arr = [
'lineColor',
'backgroundColor',
'borderColor'
];

if(~arr.indexOf(p)) {
if(value) {
$('#' + p + 'Checkbox').prop('checked', false);;
$('#' + p + 'Checkbox').prop('checked', false);
}

if(!$('#' + p + 'Checkbox').is(':checked')) {
value = '#' + $('#' + p).val();
value = $('#' + p).val();
}
}

Expand Down
82 changes: 56 additions & 26 deletions src/classes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export default {
this.lines = lines;
this.label = label;
this.value = value;
this.ctx = ctx;

// Init style
this.style = {
Expand Down Expand Up @@ -171,7 +170,7 @@ export default {

/* ======================= DRAWING ======================= */
// Draw label text
this.drawText = function () {
this.drawText = function (ctx) {
var align = this.style.textAlign;
var font = this.style.font;
var lh = font.lineHeight;
Expand All @@ -192,13 +191,13 @@ export default {
x += this.textRect.width;
}

this.ctx.font = this.style.font.string;
this.ctx.fillStyle = color;
this.ctx.textAlign = align;
this.ctx.textBaseline = "middle";
ctx.font = this.style.font.string;
ctx.fillStyle = color;
ctx.textAlign = align;
ctx.textBaseline = "middle";

for (idx = 0; idx < ilen; ++idx) {
this.ctx.fillText(
ctx.fillText(
this.lines[idx],
Math.round(x) + this.style.padding.left,
Math.round(y),
Expand All @@ -208,6 +207,36 @@ export default {
}
};

// Draw label box
this.drawLabel = function (ctx) {
ctx.beginPath();

console.log(this.labelRect);

ctx.roundRect(
Math.round(this.labelRect.x),
Math.round(this.labelRect.y),
Math.round(this.labelRect.width),
Math.round(this.labelRect.height),
this.style.borderRadius
);
ctx.closePath();

console.log(this.style.backgroundColor);

if (this.style.backgroundColor) {
ctx.fillStyle = this.style.backgroundColor || "transparent";
ctx.fill();
}

if (this.style.borderColor && this.style.borderWidth) {
ctx.strokeStyle = this.style.borderColor;
ctx.lineWidth = this.style.borderWidth;
ctx.lineJoin = "miter";
ctx.stroke();
}
};

this.ccw = function (A, B, C) {
return (C.y - A.y) * (B.x - A.x) > (B.y - A.y) * (C.x - A.x);
};
Expand All @@ -219,22 +248,22 @@ export default {
);
};

this.drawLine = function () {
this.drawLine = function (ctx) {
if (!this.lines.length) {
return;
}
this.ctx.save();

this.ctx.strokeStyle = this.style.lineColor;
this.ctx.lineWidth = this.style.lineWidth;
this.ctx.lineJoin = "miter";
this.ctx.beginPath();
this.ctx.moveTo(this.center.anchor.x, this.center.anchor.y);
this.ctx.lineTo(this.center.copy.x, this.center.copy.y);
this.ctx.stroke();

this.ctx.beginPath();
this.ctx.moveTo(this.center.copy.x, this.center.copy.y);
ctx.save();

ctx.strokeStyle = this.style.lineColor;
ctx.lineWidth = this.style.lineWidth;
ctx.lineJoin = "miter";
ctx.beginPath();
ctx.moveTo(this.center.anchor.x, this.center.anchor.y);
ctx.lineTo(this.center.copy.x, this.center.copy.y);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(this.center.copy.x, this.center.copy.y);
const xOffset = this.textRect.width + this.style.padding.width;
const intersect = this.intersects(
this.textRect,
Expand All @@ -248,18 +277,19 @@ export default {
y: this.textRect.y + this.textRect.height / 2,
}
);
this.ctx.lineTo(
ctx.lineTo(
this.textRect.x + (intersect ? xOffset : 0),
this.textRect.y + this.textRect.height / 2
);
this.ctx.stroke();
this.ctx.restore();
ctx.stroke();
ctx.restore();
};

this.draw = function () {
this.draw = function (ctx) {
if (chart.getDataVisibility(index)) {
this.drawText();
this.drawLine();
this.drawLabel(ctx);
this.drawText(ctx);
this.drawLine(ctx);
}
};

Expand Down

0 comments on commit b87eba6

Please sign in to comment.