Skip to content

Commit

Permalink
Merge pull request #42 from DeNA/issue_88
Browse files Browse the repository at this point in the history 
feat: Show bbox size while creating/resizing
  • Loading branch information
@jonatan-alama
jonatan-alama authored Apr 6, 2022
2 parents 7d4d419 + dff896c commit 5a8f759
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 9 deletions.
62 changes: 60 additions & 2 deletions packages/svg-image-annotation/src/rect-create.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ class RectCreate extends ElementCreate<RectangleNewAnnotation> {
movingPoint: Position2D = null;
verticalGuide: SVGLineElement = null;
horizontalGuide: SVGLineElement = null;
labelBgDefs: SVGDefsElement = null;
labelBg: SVGElement = null;
label: SVGTextElement = null;
label2: SVGTextElement = null;
constructor(
annotation: RectangleNewAnnotation,
parent: ImageAnnotation,
Expand All @@ -39,6 +43,34 @@ class RectCreate extends ElementCreate<RectangleNewAnnotation> {
"vector-effect": "non-scaling-stroke"
}) as SVGLineElement;

const rand = Math.random();
this.labelBgDefs = getNode("defs") as SVGDefsElement;
const labelBgFilter = getNode("filter", {
x: "-0.02",
y: "0",
width: "1.04",
height: "1.1",
id: `${rand}_textBackground`
});
this.labelBg = getNode("feFlood", {
"flood-color": "rgba(200,200,200,1)"
});
labelBgFilter.appendChild(this.labelBg);
labelBgFilter.appendChild(
getNode("feComposite", {
in: "SourceGraphic",
operator: "xor"
})
);
this.labelBgDefs.appendChild(labelBgFilter);
this.label = getNode("text", {
filter: `url(#${rand}_textBackground)`,
"text-anchor": "left"
}) as SVGTextElement;
this.label2 = getNode("text", {
"text-anchor": "left"
}) as SVGTextElement;

this.parent.elements.drawCanvas.style.cursor = "none";
this.verticalGuide.style.cursor = "none";
this.horizontalGuide.style.cursor = "none";
Expand All @@ -47,6 +79,9 @@ class RectCreate extends ElementCreate<RectangleNewAnnotation> {
this.group.appendChild(this.verticalGuide);
this.group.appendChild(this.horizontalGuide);
this.group.appendChild(this.rect);
this.group.appendChild(this.labelBgDefs);
this.group.appendChild(this.label);
this.group.appendChild(this.label2);
this.verticalGuide.addEventListener("mousedown", this.mouseDownHandler);
this.horizontalGuide.addEventListener("mousedown", this.mouseDownHandler);
this.canvas.addEventListener("mousedown", this.mouseDownHandler);
Expand Down Expand Up @@ -91,10 +126,10 @@ class RectCreate extends ElementCreate<RectangleNewAnnotation> {
if (!isMinHeight || !isMinWidth) {
return;
}

window.removeEventListener("mouseup", this.mouseUpHandler);
window.removeEventListener("mousemove", this.mouseMoveHandler);

const properties = {
...this.annotation.properties,
x,
Expand All @@ -112,6 +147,7 @@ class RectCreate extends ElementCreate<RectangleNewAnnotation> {
const { style, minHeight = 0, minWidth = 0 } = this.annotation.properties;
const { strokeColor, fillColor } = this.style;
const { startPoint, movingPoint } = this;
const scaleFactor = 1 / this.parent.status.scale;

this.verticalGuide.setAttributeNS(
null,
Expand Down Expand Up @@ -166,6 +202,10 @@ class RectCreate extends ElementCreate<RectangleNewAnnotation> {
const isMinHeight = height >= minHeight;
const isMinWidth = width >= minWidth;
const className = !isMinHeight || !isMinWidth ? "not-min-size" : "";
const labelWidth = Math.floor(width);
const labelHeight = Math.floor(height);
const labelTotal = labelWidth * labelHeight;
const sizeLabel = `${labelWidth}x${labelHeight} (${labelTotal})`;

this.rect.setAttribute("class", className);
this.rect.setAttributeNS(null, "x", x.toString());
Expand All @@ -174,6 +214,24 @@ class RectCreate extends ElementCreate<RectangleNewAnnotation> {
this.rect.setAttributeNS(null, "height", height.toString());
this.rect.setAttributeNS(null, "stroke", style.strokeColor || strokeColor);
this.rect.setAttributeNS(null, "fill", style.fillColor || fillColor);

this.labelBg.setAttributeNS(
null,
"flood-color",
style.strokeColor || strokeColor
);
this.label.textContent = sizeLabel;
this.label.setAttributeNS(null, "x", (x + 0 * scaleFactor).toString());
this.label.setAttributeNS(null, "y", (y - 3 * scaleFactor).toString());
this.label.setAttributeNS(null, "font-size", `${scaleFactor}em`);
this.label.setAttributeNS(null, "fill", style.strokeColor || strokeColor);
this.label2.textContent = sizeLabel;
this.label2.setAttributeNS(null, "x", (x + 0 * scaleFactor).toString());
this.label2.setAttributeNS(null, "y", (y - 3 * scaleFactor).toString());
this.label2.setAttributeNS(null, "font-size", `${scaleFactor}em`);
this.label2.setAttributeNS(null, "fill", "rgb(0,0,0)");

this.group.setAttribute("class", "label-always");
}
destroy() {
this.verticalGuide.removeEventListener("mousedown", this.mouseDownHandler);
Expand Down
26 changes: 19 additions & 7 deletions packages/svg-image-annotation/src/rect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ class Rect extends Element<RectangleAnnotation> {
const { minHeight = 0, minWidth = 0 } = this.annotation.properties;
const isMinHeight = movingRect ? movingRect.height >= minHeight : true;
const isMinWidth = movingRect ? movingRect.width >= minWidth : true;

if (!isMinHeight || !isMinWidth) {
return;
}
Expand Down Expand Up @@ -245,16 +245,20 @@ class Rect extends Element<RectangleAnnotation> {
}
update() {
const { editable, label, selectable } = this.annotation;
const { style = {}, minHeight = 0, minWidth = 0 } = this.annotation.properties;
const {
style = {},
minHeight = 0,
minWidth = 0
} = this.annotation.properties;
let { x, y, width, height } = this.annotation.properties;
const { strokeColor, fillColor } = this.style;
const scaleFactor = 1 / this.parent.status.scale;
const strokeWidth = this.selected
? this.parent.options.selectedAnnotationStrokeWidth
: this.parent.options.strokeWidth;

this.rect.setAttribute("class", "");

if (this.movingRect) {
const isMinHeight = this.movingRect.height >= minHeight;
const isMinWidth = this.movingRect.width >= minWidth;
Expand All @@ -265,6 +269,16 @@ class Rect extends Element<RectangleAnnotation> {
width = this.movingRect.width;
height = this.movingRect.height;
this.rect.setAttribute("class", rectClassName);

const labelWidth = Math.floor(width);
const labelHeight = Math.floor(height);
const labelTotal = labelWidth * labelHeight;
const sizeLabel = `${labelWidth}x${labelHeight} (${labelTotal})`;
this.label.textContent = sizeLabel;
this.label2.textContent = sizeLabel;
} else {
this.label.textContent = label || "";
this.label2.textContent = label || "";
}

this.emptyContainer();
Expand Down Expand Up @@ -318,12 +332,10 @@ class Rect extends Element<RectangleAnnotation> {
"flood-color",
style.strokeColor || strokeColor
);
this.label.textContent = label || "";
this.label.setAttributeNS(null, "x", (x + 0 * scaleFactor).toString());
this.label.setAttributeNS(null, "y", (y - 3 * scaleFactor).toString());
this.label.setAttributeNS(null, "font-size", `${scaleFactor}em`);
this.label.setAttributeNS(null, "fill", style.strokeColor || strokeColor);
this.label2.textContent = label || "";
this.label2.setAttributeNS(null, "x", (x + 0 * scaleFactor).toString());
this.label2.setAttributeNS(null, "y", (y - 3 * scaleFactor).toString());
this.label2.setAttributeNS(null, "font-size", `${scaleFactor}em`);
Expand All @@ -335,7 +347,7 @@ class Rect extends Element<RectangleAnnotation> {
this.selectable.setAttributeNS(null, "height", height.toString());

let className = "";
if (this.parent.options.showLabels === "always") {
if (this.parent.options.showLabels === "always" || this.movingRect) {
className += " label-always";
}
if (this.parent.options.showLabels === "hover" && !this.movingRect) {
Expand Down

0 comments on commit 5a8f759

Please sign in to comment.