Skip to content

Commit

Permalink
Merge pull request #777 from VisActor/fix/shadow-pick
Browse files Browse the repository at this point in the history
fix: fix shadow pick issue
  • Loading branch information
neuqzxy authored Dec 12, 2023
2 parents 83e74a3 + df8c41e commit a03a1eb
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 38 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vrender-core",
"comment": "fix: fix shadow pick issue",
"type": "none"
}
],
"packageName": "@visactor/vrender-core"
}
25 changes: 14 additions & 11 deletions packages/vrender-core/src/picker/pick-interceptor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,19 +75,22 @@ export class ShadowRootPickItemInterceptorContribution implements IPickItemInter

const g = graphic.shadowRoot;
const currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix);
const newPoint = new Point(point.x, point.y);
parentMatrix.transformPoint(newPoint, newPoint);
const transMatrix = graphic.transMatrix;
currentGroupMatrix.multiply(
transMatrix.a,
transMatrix.b,
transMatrix.c,
transMatrix.d,
transMatrix.e,
transMatrix.f
const newPoint = new Point(
currentGroupMatrix.a * point.x + currentGroupMatrix.c * point.y + currentGroupMatrix.e,
currentGroupMatrix.b * point.x + currentGroupMatrix.d * point.y + currentGroupMatrix.f
);
// const transMatrix = graphic.transMatrix;
// currentGroupMatrix.multiply(
// transMatrix.a,
// transMatrix.b,
// transMatrix.c,
// transMatrix.d,
// transMatrix.e,
// transMatrix.f
// );

const result = pickerService.pickGroup(g, newPoint.clone(), currentGroupMatrix, pickParams);
// currentGroupMatrix.transformPoint(newPoint, newPoint);
const result = pickerService.pickGroup(g, newPoint, currentGroupMatrix, pickParams);

context.highPerformanceRestore();

Expand Down
54 changes: 27 additions & 27 deletions packages/vrender/__tests__/browser/src/pages/symbol.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,31 +37,31 @@ export const page = () => {
console.timeEnd();
// console.log(result);
const symbolList = [
// 'circle',
// 'cross',
// 'diamond',
// 'square',
// 'arrow',
// 'arrow2Left',
// 'arrow2Right',
// 'arrow2Up',
// 'arrow2Down',
// 'wedge',
// 'thinTriangle',
// 'triangle',
// 'triangleUp',
// 'triangleDown',
// 'triangleRight',
// 'triangleLeft',
// 'stroke',
// 'star',
// 'wye',
// 'rect',
// 'lineH',
// 'lineV',
// 'close',
// 'M -2 2 L 4 -5 L 7 -6 L 6 -3 L -1 3 C 0 4 0 5 1 4 C 1 5 2 6 1 6 A 1.42 1.42 0 0 1 0 7 A 5 5 0 0 0 -2 4 Q -2.5 3.9 -2.5 4.5 T -4 5.8 T -4.8 5 T -3.5 3.5 T -3 3 A 5 5 90 0 0 -6 1 A 1.42 1.42 0 0 1 -5 0 C -5 -1 -4 0 -3 0 C -4 1 -3 1 -2 2 M 4 -5 L 4 -3 L 6 -3 L 5 -4 L 4 -5',
// `<svg t="1694424698284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13305" width="200" height="200"><path d="M915.393939 217.212121c0 119.963152-180.596364 217.212121-403.393939 217.212121S108.606061 337.175273 108.606061 217.212121s180.596364-217.212121 403.393939-217.212121 403.393939 97.24897 403.393939 217.212121z" fill="#C1D0FF" p-id="13306"></path><path d="M884.363636 372.363636c0 119.963152-166.725818 217.212121-372.363636 217.212122S139.636364 492.326788 139.636364 372.363636s166.725818-217.212121 372.363636-217.212121 372.363636 97.24897 372.363636 217.212121z" fill="#0F62FE" p-id="13307"></path><path d="M915.393939 217.212121c0 119.963152-180.596364 217.212121-403.393939 217.212121S108.606061 337.175273 108.606061 217.212121s180.596364-217.212121 403.393939-217.212121 403.393939 97.24897 403.393939 217.212121z" fill="#E8E8E8" fill-opacity=".1" p-id="13308"></path><path d="M782.522182 343.505455C714.876121 379.87297 619.302788 403.393939 512 403.393939c-107.271758 0-202.876121-23.489939-270.522182-59.888484C172.528485 306.331152 139.636364 260.282182 139.636364 217.212121c0-43.101091 32.892121-89.150061 101.841454-126.293333C309.123879 54.551273 404.697212 31.030303 512 31.030303c107.271758 0 202.876121 23.489939 270.522182 59.888485C851.471515 128.093091 884.363636 174.142061 884.363636 217.212121c0 43.101091-32.892121 89.150061-101.841454 126.293334zM512 434.424242c222.797576 0 403.393939-97.24897 403.393939-217.212121s-180.596364-217.212121-403.393939-217.212121S108.606061 97.24897 108.606061 217.212121s180.596364 217.212121 403.393939 217.212121z" fill="#FFFFFF" fill-opacity=".6" p-id="13309"></path><path d="M451.677091 341.147152a13.498182 13.498182 0 0 0 13.777454-13.591273 14.149818 14.149818 0 0 0-13.777454-13.994667c-51.106909-1.768727-99.483152-13.312-135.912727-32.581818-39.718788-21.038545-62.060606-49.555394-62.060606-79.282424 0-29.72703 22.341818-58.243879 62.060606-79.251394 36.429576-19.300848 84.805818-30.844121 135.912727-32.581818a14.149818 14.149818 0 0 0 13.777454-14.025697 13.467152 13.467152 0 0 0-13.777454-13.591273c-64.915394 1.799758-126.510545 16.259879-172.714667 40.711757C229.500121 129.148121 201.69697 164.677818 201.69697 201.69697c0 37.019152 27.803152 72.548848 77.265454 98.738424 46.204121 24.451879 107.799273 38.912 172.714667 40.711758z m61.967515 0a13.560242 13.560242 0 0 0 13.870546-13.591273v-0.775758a13.34303 13.34303 0 0 0-13.001697-13.218909 13.28097 13.28097 0 0 0-13.467152 10.395152l-0.155151 0.713697a13.560242 13.560242 0 0 0 12.753454 16.44606z" fill="#FFFFFF" p-id="13310"></path><path d="M870.710303 542.782061c-48.593455 86.667636-189.843394 149.348848-356.507151 149.348848-166.632727 0-307.882667-62.681212-356.507152-149.348848-11.729455 20.914424-18.059636 43.225212-18.059636 66.404848 0 119.125333 167.718788 215.691636 374.566788 215.691636 206.87903 0 374.597818-96.566303 374.597818-215.722666 0-23.148606-6.330182-45.459394-18.059637-66.373818z" fill="#0F62FE" p-id="13311"></path><path d="M870.710303 741.934545c-48.593455 86.636606-189.843394 149.317818-356.507151 149.317819-166.632727 0-307.882667-62.681212-356.507152-149.348849-11.729455 20.914424-18.059636 43.225212-18.059636 66.404849C139.636364 927.402667 307.355152 1024 514.203152 1024c206.87903 0 374.597818-96.566303 374.597818-215.722667 0-23.148606-6.330182-45.459394-18.059637-66.373818z" fill="#0F62FE" p-id="13312"></path></svg>`,
'circle',
'cross',
'diamond',
'square',
'arrow',
'arrow2Left',
'arrow2Right',
'arrow2Up',
'arrow2Down',
'wedge',
'thinTriangle',
'triangle',
'triangleUp',
'triangleDown',
'triangleRight',
'triangleLeft',
'stroke',
'star',
'wye',
'rect',
'lineH',
'lineV',
'close',
'M -2 2 L 4 -5 L 7 -6 L 6 -3 L -1 3 C 0 4 0 5 1 4 C 1 5 2 6 1 6 A 1.42 1.42 0 0 1 0 7 A 5 5 0 0 0 -2 4 Q -2.5 3.9 -2.5 4.5 T -4 5.8 T -4.8 5 T -3.5 3.5 T -3 3 A 5 5 90 0 0 -6 1 A 1.42 1.42 0 0 1 -5 0 C -5 -1 -4 0 -3 0 C -4 1 -3 1 -2 2 M 4 -5 L 4 -3 L 6 -3 L 5 -4 L 4 -5',
`<svg t="1694424698284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13305" width="200" height="200"><path d="M915.393939 217.212121c0 119.963152-180.596364 217.212121-403.393939 217.212121S108.606061 337.175273 108.606061 217.212121s180.596364-217.212121 403.393939-217.212121 403.393939 97.24897 403.393939 217.212121z" fill="#C1D0FF" p-id="13306"></path><path d="M884.363636 372.363636c0 119.963152-166.725818 217.212121-372.363636 217.212122S139.636364 492.326788 139.636364 372.363636s166.725818-217.212121 372.363636-217.212121 372.363636 97.24897 372.363636 217.212121z" fill="#0F62FE" p-id="13307"></path><path d="M915.393939 217.212121c0 119.963152-180.596364 217.212121-403.393939 217.212121S108.606061 337.175273 108.606061 217.212121s180.596364-217.212121 403.393939-217.212121 403.393939 97.24897 403.393939 217.212121z" fill="#E8E8E8" fill-opacity=".1" p-id="13308"></path><path d="M782.522182 343.505455C714.876121 379.87297 619.302788 403.393939 512 403.393939c-107.271758 0-202.876121-23.489939-270.522182-59.888484C172.528485 306.331152 139.636364 260.282182 139.636364 217.212121c0-43.101091 32.892121-89.150061 101.841454-126.293333C309.123879 54.551273 404.697212 31.030303 512 31.030303c107.271758 0 202.876121 23.489939 270.522182 59.888485C851.471515 128.093091 884.363636 174.142061 884.363636 217.212121c0 43.101091-32.892121 89.150061-101.841454 126.293334zM512 434.424242c222.797576 0 403.393939-97.24897 403.393939-217.212121s-180.596364-217.212121-403.393939-217.212121S108.606061 97.24897 108.606061 217.212121s180.596364 217.212121 403.393939 217.212121z" fill="#FFFFFF" fill-opacity=".6" p-id="13309"></path><path d="M451.677091 341.147152a13.498182 13.498182 0 0 0 13.777454-13.591273 14.149818 14.149818 0 0 0-13.777454-13.994667c-51.106909-1.768727-99.483152-13.312-135.912727-32.581818-39.718788-21.038545-62.060606-49.555394-62.060606-79.282424 0-29.72703 22.341818-58.243879 62.060606-79.251394 36.429576-19.300848 84.805818-30.844121 135.912727-32.581818a14.149818 14.149818 0 0 0 13.777454-14.025697 13.467152 13.467152 0 0 0-13.777454-13.591273c-64.915394 1.799758-126.510545 16.259879-172.714667 40.711757C229.500121 129.148121 201.69697 164.677818 201.69697 201.69697c0 37.019152 27.803152 72.548848 77.265454 98.738424 46.204121 24.451879 107.799273 38.912 172.714667 40.711758z m61.967515 0a13.560242 13.560242 0 0 0 13.870546-13.591273v-0.775758a13.34303 13.34303 0 0 0-13.001697-13.218909 13.28097 13.28097 0 0 0-13.467152 10.395152l-0.155151 0.713697a13.560242 13.560242 0 0 0 12.753454 16.44606z" fill="#FFFFFF" p-id="13310"></path><path d="M870.710303 542.782061c-48.593455 86.667636-189.843394 149.348848-356.507151 149.348848-166.632727 0-307.882667-62.681212-356.507152-149.348848-11.729455 20.914424-18.059636 43.225212-18.059636 66.404848 0 119.125333 167.718788 215.691636 374.566788 215.691636 206.87903 0 374.597818-96.566303 374.597818-215.722666 0-23.148606-6.330182-45.459394-18.059637-66.373818z" fill="#0F62FE" p-id="13311"></path><path d="M870.710303 741.934545c-48.593455 86.636606-189.843394 149.317818-356.507151 149.317819-166.632727 0-307.882667-62.681212-356.507152-149.348849-11.729455 20.914424-18.059636 43.225212-18.059636 66.404849C139.636364 927.402667 307.355152 1024 514.203152 1024c206.87903 0 374.597818-96.566303 374.597818-215.722667 0-23.148606-6.330182-45.459394-18.059637-66.373818z" fill="#0F62FE" p-id="13312"></path></svg>`,
`<svg t="1700725195071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1473" width="200" height="200"><path d="M512 57.6c-246.4 0-448 201.6-448 448s201.6 448 448 448 448-201.6 448-448-201.6-448-448-448zM732.8 448l-9.6 230.4c0 6.4-3.2 9.6-6.4 12.8-3.2 0-60.8 38.4-198.4 38.4-137.6 0-198.4-35.2-198.4-38.4-3.2-3.2-6.4-6.4-6.4-12.8L294.4 448c-19.2-9.6-28.8-28.8-28.8-51.2 0-32 25.6-57.6 57.6-57.6s57.6 25.6 57.6 57.6c0 28.8-19.2 51.2-44.8 57.6 19.2 38.4 51.2 83.2 73.6 83.2 12.8 0 41.6-35.2 76.8-131.2-22.4-9.6-38.4-32-38.4-60.8 0-35.2 28.8-64 67.2-64s64 28.8 64 64c0 25.6-16 48-38.4 60.8 32 89.6 64 134.4 80 134.4s48-41.6 70.4-89.6c-25.6-6.4-44.8-28.8-44.8-57.6 0-32 25.6-57.6 57.6-57.6s57.6 25.6 57.6 57.6c0 25.6-12.8 44.8-28.8 54.4z" p-id="1474"></path></svg>`
];
const graphics: IGraphic[] = [];
Expand All @@ -70,7 +70,7 @@ export const page = () => {
symbolType: 'circle',
x: 120,
y: 120,
stroke: 'black',
stroke: 'red',
lineWidth: 3,
lineCap: 'round',
size: 60,
Expand All @@ -85,7 +85,7 @@ export const page = () => {
circle.setAttributes({ globalZIndex: 0 });
});

// graphics.push(circle);
graphics.push(circle);

symbolList.forEach((st, i) => {
const symbol = createSymbol({
Expand Down

0 comments on commit a03a1eb

Please sign in to comment.