Navigation Menu

Skip to content

Commit

Permalink
refactor: Optimize automatic position adjustment of Guide Tag.
Browse files Browse the repository at this point in the history
  • Loading branch information
@simaQ
simaQ committed Aug 2, 2018
1 parent 6832bdb commit 2c0c18a
Showing 1 changed file with 49 additions and 52 deletions.
101 changes: 49 additions & 52 deletions src/component/guide/tag.js
View file
Expand Up @@ -6,66 +6,63 @@ class Tag extends GuideBase {
this.type = 'tag';
this.position = null;
this.content = null;
this.direct = 'auto'; // 默认自动计算，如果用户设置了就按照用户设置的渲染
this.direct = 'tl'; // 默认 tag 位置
this.autoDirect = true; // 当 tag 出轨时，拉它一把，悬崖勒马
this.offsetX = 0;
this.offsetY = 0;
this.side = 4; // 三角标的边长
this.background = {
padding: 5, // tag 内边距
radius: 2, // tag 圆角
fill: '#1890FF' // tag 背景色
};
}; // tag 背景框样式
this.textStyle = {
fontSize: 12,
fill: '#fff',
textAlign: 'center',
textBaseline: 'middle'
};
this.withPoint = true;
}; // 文本样式
this.withPoint = true; // 是否带点
this.pointStyle = {
fill: '#1890FF',
r: 3,
lineWidth: 1,
stroke: '#fff'
};
}; // 点的样式
}

_getDirect(container, point, tagWidth, tagHeight) {
let direct = this.direct;
if (direct === 'auto') { // 自动计算
const side = this.side;
const canvas = container.get('canvas');
const clientWidth = canvas.getWidth();
const clientHeight = canvas.getHeight();
const { x, y } = point;

let vertical = 't';
let horizontal = 'l';

if (y - side - tagHeight < 0) {
vertical = 'b';
}

if (vertical === 'b') {
if (y + side + tagHeight > clientHeight) {
vertical = 't';
}
}

const diff = vertical === 'c' ? side : 0;
if (x - diff - tagWidth < 0) {
const side = this.side;
const canvas = container.get('canvas');
const clientWidth = canvas.get('width');
const clientHeight = canvas.get('height');
const { x, y } = point;

let vertical = direct[0];
let horizontal = direct[1];

// 垂直方向位置调整
if (vertical === 't' && (y - side - tagHeight) < 0) {
vertical = 'b';
} else if (vertical === 'b' && (y + side + tagHeight) > clientHeight) {
vertical = 't';
}
// 水平方向位置调整
const diff = vertical === 'c' ? side : 0;
if (horizontal === 'l' && (x - diff - tagWidth) < 0) {
horizontal = 'r';
} else if (horizontal === 'r' && (x + diff + tagWidth) > clientWidth) {
horizontal = 'l';
} else if (horizontal === 'c') {
if (tagWidth / 2 + x + diff > clientWidth) {
horizontal = 'l';
} else if (x - (tagWidth / 2) - diff < 0) {
horizontal = 'r';
}
if (horizontal === 'r') {
const diff = vertical === 'c' ? side : 0;
if (x + diff + tagWidth > clientWidth) {
horizontal = 'l';
}
}
direct = vertical + horizontal;
this.direct = direct;
}

direct = vertical + horizontal;
return direct;
}

Expand Down Expand Up @@ -120,15 +117,15 @@ class Tag extends GuideBase {
}, background)
});
shapes.push(tagBg);
const direct = this._getDirect(container, position, tagWidth, tagHeight);
const direct = this.autoDirect ? this._getDirect(container, position, tagWidth, tagHeight) : this.direct;
const side = this.side;
let x = position.x + this.offsetX;
let y = position.y + this.offsetY;
let arrowPoints;
const radius = Util.parsePadding(background.radius);
if (direct === 'tl') {
arrowPoints = [
{ x: tagWidth - side + xMin, y: tagHeight + yMin - 1 }, // 这个 1 是为了防止出现白边
{ x: tagWidth + xMin - side - 1, y: tagHeight + yMin - 1 }, // 这个 1 是为了防止出现白边
{ x: tagWidth + xMin, y: tagHeight + yMin - 1 },
{ x: tagWidth + xMin, y: tagHeight + side + yMin }
];
Expand All @@ -137,8 +134,8 @@ class Tag extends GuideBase {
y = y - side - tagHeight;
} else if (direct === 'cl') {
arrowPoints = [
{ x: tagWidth + xMin - 1, y: (tagHeight - side) / 2 + yMin },
{ x: tagWidth + xMin - 1, y: (tagHeight + side) / 2 + yMin },
{ x: tagWidth + xMin - 1, y: (tagHeight - side) / 2 + yMin - 1 },
{ x: tagWidth + xMin - 1, y: (tagHeight + side) / 2 + yMin + 1 },
{ x: tagWidth + side + xMin, y: tagHeight / 2 + yMin }
];

Expand All @@ -147,7 +144,7 @@ class Tag extends GuideBase {
} else if (direct === 'bl') {
arrowPoints = [
{ x: tagWidth + xMin, y: -side + yMin },
{ x: tagWidth - side + xMin, y: yMin + 1 },
{ x: tagWidth + xMin - side - 1, y: yMin + 1 },
{ x: tagWidth + xMin, y: yMin + 1 }
];
radius[1] = 0;
Expand All @@ -157,40 +154,40 @@ class Tag extends GuideBase {
} else if (direct === 'bc') {
arrowPoints = [
{ x: tagWidth / 2 + xMin, y: -side + yMin },
{ x: (tagWidth - side) / 2 + xMin, y: yMin + 1 },
{ x: (tagWidth + side) / 2 + xMin, y: yMin + 1 }
{ x: (tagWidth - side) / 2 + xMin - 1, y: yMin + 1 },
{ x: (tagWidth + side) / 2 + xMin + 1, y: yMin + 1 }
];
x = x - tagWidth / 2;
y = y + side;
} else if (direct === 'br') {
arrowPoints = [
{ x: xMin, y: -side + yMin },
{ x: xMin, y: yMin - side },
{ x: xMin, y: yMin + 1 },
{ x: side + xMin, y: yMin + 1 }
{ x: xMin + side + 1, y: yMin + 1 }
];
radius[0] = 0;
y = y + side;
} else if (direct === 'cr') {
arrowPoints = [
{ x: -side + xMin, y: tagHeight / 2 + yMin },
{ x: xMin + 1, y: (tagHeight - side) / 2 + yMin },
{ x: xMin + 1, y: (tagHeight + side) / 2 + yMin }
{ x: xMin - side, y: tagHeight / 2 + yMin },
{ x: xMin + 1, y: (tagHeight - side) / 2 + yMin - 1 },
{ x: xMin + 1, y: (tagHeight + side) / 2 + yMin + 1 }
];
x = x + side;
y = y - tagHeight / 2;
} else if (direct === 'tr') {
arrowPoints = [
{ x: 0 + xMin, y: tagHeight + side + yMin },
{ x: 0 + xMin, y: tagHeight + yMin - 1 },
{ x: side + xMin, y: tagHeight + yMin - 1 }
{ x: xMin, y: tagHeight + side + yMin },
{ x: xMin, y: tagHeight + yMin - 1 },
{ x: side + xMin + 1, y: tagHeight + yMin - 1 }
];
radius[3] = 0;

y = y - tagHeight - side;
} else if (direct === 'tc') {
arrowPoints = [
{ x: (tagWidth - side) / 2 + xMin, y: tagHeight + yMin - 1 },
{ x: (tagWidth + side) / 2 + xMin, y: tagHeight + yMin - 1 },
{ x: (tagWidth - side) / 2 + xMin - 1, y: tagHeight + yMin - 1 },
{ x: (tagWidth + side) / 2 + xMin + 1, y: tagHeight + yMin - 1 },
{ x: tagWidth / 2 + xMin, y: tagHeight + side + yMin }
];
x = x - tagWidth / 2;
Expand Down

0 comments on commit 2c0c18a

Please sign in to comment.