From 0c566c19c948d80c320816fdc165c311a79b1f58 Mon Sep 17 00:00:00 2001 From: paleface001 Date: Mon, 23 Dec 2019 19:57:19 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20label=E5=8F=82=E4=B8=8Eauto-padding?= =?UTF-8?q?=E8=AE=A1=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/base/controller/padding.ts | 66 ++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4770b2790b..5108e0e347 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "lint-fix:eslint": "eslint --quiet --ext .ts --fix ./src ./__tests__ ./demos", "lint-fix:examples": "prettier --write 'examples/**/*.{js,md}'", "test": "jest", - "test-live": "DEBUG_MODE=1 jest --watch ./__tests__/unit/combo-spec.ts", + "test-live": "DEBUG_MODE=1 jest --watch", "coverage": "jest --coverage", "ci": "run-s lint-check build test coverage", "compare-live": "node scripts/compare.js", diff --git a/src/base/controller/padding.ts b/src/base/controller/padding.ts index 8ae1c92a06..37b8caf2ee 100644 --- a/src/base/controller/padding.ts +++ b/src/base/controller/padding.ts @@ -103,6 +103,7 @@ export default class PaddingController { this._getAxis(view, components_bbox); let box = this._mergeBBox(components_bbox); this._getLegend(view, components_bbox, box); + box = this._mergeBBox(components_bbox); // 参与auto padding的自定义组件 const components = this.innerPaddingComponents; _.each(components, (obj) => { @@ -123,6 +124,12 @@ export default class PaddingController { 0 - box.minX + this.bleeding[3], ]; this.adjustAxisPadding(view, padding); + // label、annotation等 + const panelPadding = this._getPanel(view, components_bbox, box); + padding[0] += panelPadding[0]; + padding[1] += panelPadding[1]; + padding[2] += panelPadding[2]; + padding[2] += panelPadding[3]; return padding; } @@ -173,6 +180,65 @@ export default class PaddingController { } } + private _getPanel(view, bboxes, box) { + const groups = []; + const geoms = view.get('elements'); + _.each(geoms, (geom) => { + if (geom.get('labelController')) { + const labelContainer = geom.get('labelController').labelsContainer; + if (labelContainer) { + groups.push(labelContainer); + } + } + }); + let minX = Infinity; + let maxX = -Infinity; + let minY = Infinity; + let maxY = -Infinity; + _.each(groups, (group) => { + const bbox = group.getBBox(); + if (bbox.minX < minX) { + minX = bbox.minX; + } + if (bbox.maxX > maxX) { + maxX = bbox.maxX; + } + if (bbox.minY < minY) { + minY = bbox.minY; + } + if (bbox.maxY > maxY) { + maxY = bbox.maxY; + } + }); + const panelRange = view.get('panelRange'); + //right + let rightDist = Math.max(maxX - parseFloat(panelRange.maxX), 0); + if (rightDist > 0) { + const ratio = panelRange.width / (panelRange.width + rightDist); + rightDist *= ratio; + } + //left + let leftDist = Math.max(parseFloat(panelRange.minX) - minX, 0); + if (leftDist > 0) { + const ratio = panelRange.width / (panelRange.width + leftDist); + leftDist *= ratio; + } + //top + let topDist = Math.max(parseFloat(panelRange.minY) - minY, 0); + if (topDist > 0) { + const ratio = panelRange.height / (panelRange.height + topDist); + topDist *= ratio; + } + //bottom + let bottomDist = Math.max(maxY - parseFloat(panelRange.maxY), 0); + if (bottomDist > 0) { + const ratio = panelRange.height / (panelRange.height + bottomDist); + bottomDist *= ratio; + } + + return [topDist, rightDist, bottomDist, leftDist]; + } + private _mergeBBox(bboxes) { let minX = Infinity; let maxX = -Infinity;