feat(draw): support draw line for element with angle #WIK-14850 #785
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -24,7 +24,8 @@ export const getHitOutlineGeometry = (board: PlaitBoard, point: Point, offset: n | |||
| let client = RectangleClient.getRectangleByPoints(node.points); | |||
| client = RectangleClient.getOutlineRectangle(client, offset); | |||
| const shape = getShape(node); | |||
| const isHit = getEngine(shape).isInsidePoint(client, point); | |||
| const rotatedPoint = rotatePoints([point], RectangleClient.getCenterPoint(client), -node.angle)[0]; | |||
| const isHit = getEngine(shape).isInsidePoint(client, rotatedPoint); | |||
There was a problem hiding this comment.
无角度不旋转，不行就抽取一个函数吧，根据元素是否有角度决定是否旋转点
packages/draw/src/interfaces/line.ts
Outdated
| if (line.source.boundId) { | ||
| const sourceElement = getElementById<PlaitGeometry>(board, line.source.boundId)!; | ||
| const sourceConnectionPoint = getConnectionPoint(sourceElement, line.source.connection!); | ||
| sourcePoint = rotatePoints( |
| @@ -15,8 +27,13 @@ export const withLineAutoCompleteReaction = (board: PlaitBoard) => { | |||
| const targetElement = selectedElements.length === 1 && selectedElements[0]; | |||
| const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y)); | |||
| if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShape(targetElement)) { | |||
| const [rotatedMovingPoint] = rotatePoints( | |||
| @@ -42,7 +44,12 @@ export const withLineAutoComplete = (board: PlaitBoard) => { | |||
| const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y)); | |||
| if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShape(targetElement)) { | |||
| const points = getAutoCompletePoints(targetElement); | |||
| const index = getHitIndexOfAutoCompletePoint(clickPoint, points); | |||
| const [rotatedClickPoint] = rotatePoints( | |||
| @@ -59,7 +66,12 @@ export const withLineAutoComplete = (board: PlaitBoard) => { | |||
| lineShapeG = createG(); | |||
| let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y)); | |||
| if (startPoint && sourceElement) { | |||
| const distance = distanceBetweenPointAndPoint(...movingPoint, ...startPoint); | |||
| const [rotatedStartPoint] = rotatePoints( | |||
| @@ -69,6 +81,10 @@ export const withLineAutoComplete = (board: PlaitBoard) => { | |||
| const crossingPoint = engine.getNearestCrossingPoint(rectangle, startPoint); | |||
| sourcePoint = crossingPoint; | |||
| } | |||
|
|
|||
| if (sourceElement.angle) { | |||
| @@ -80,7 +80,13 @@ export const withLineResize = (board: PlaitBoard) => { | |||
| const object = resizeRef.handle === LineResizeHandle.source ? source : target; | |||
| points[handleIndex] = resizeState.endPoint; | |||
| if (hitElement) { | |||
| object.connection = getConnectionByNearestPoint(board, resizeState.endPoint, hitElement); | |||
| const [rotatedEndPoint] = rotatePoints( | |||
| getStrokeWidthByElement(sourceElement) * 2 | ||
|
|
||
| let sourceRectangle = RectangleClient.getRectangleByPoints(sourceElement.points); | ||
| const sourceShape = getShape(sourceElement); |
There was a problem hiding this comment.
sourceShape 和 sourceEngine 有用到吗？
| const sourceShape = getShape(sourceElement); | ||
| const sourceEngine = getEngine(sourceShape); | ||
| const sourceElementCornerPoints = sourceEngine.getCornerPoints(sourceRectangle); | ||
| const rotatedSourceElementCornerPoints = rotatePoints( |
| const isHit = getEngine(shape).isInsidePoint(client, point); | ||
|
|
||
| let isHit; | ||
| if (hasValidAngle(node)) { |
There was a problem hiding this comment.
这样的场景都类似处理吧，写个函数或者用类似的代码结构：
const rotatedPoint = hasValidAngle ? rotatePoints : undefined
|
|
||
| let isHit; | ||
| if (hasValidAngle(node)) { | ||
| const rotatedPoint = rotatePoints([point], RectangleClient.getCenterPoint(client), -node.angle)[0]; |
There was a problem hiding this comment.
这里返回的不是数组吗，下面调用类型为什么不报错
pubuzhixing8
approved these changes
Mar 25, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.