diff --git a/engine/src/tools/Cursor.js b/engine/src/tools/Cursor.js index a555fdf95..bb4a09a4e 100644 --- a/engine/src/tools/Cursor.js +++ b/engine/src/tools/Cursor.js @@ -294,7 +294,7 @@ Wick.Tools.Cursor = class extends Wick.Tool { stroke: true, curves: true, segments: true, - tolerance: this.SELECTION_TOLERANCE, + tolerance: this.SELECTION_TOLERANCE / this.paper.view.zoom, match: result => { return !result.item.data.isBorder; } diff --git a/engine/src/tools/PathCursor.js b/engine/src/tools/PathCursor.js index ae0115a32..4a037e15a 100644 --- a/engine/src/tools/PathCursor.js +++ b/engine/src/tools/PathCursor.js @@ -28,10 +28,10 @@ Wick.Tools.PathCursor = class extends Wick.Tool { this.CURSOR_SEGMENT = 'cursors/segment.png'; this.CURSOR_CURVE = 'cursors/curve.png'; this.HOVER_PREVIEW_SEGMENT_STROKE_COLOR = 'rgba(100,150,255,1.0)'; - this.HOVER_PREVIEW_SEGMENT_STROKE_WIDTH = 1.5; + this.HOVER_PREVIEW_SEGMENT_STROKE_WIDTH = 3; this.HOVER_PREVIEW_SEGMENT_FILL_COLOR = '#ffffff'; this.HOVER_PREVIEW_SEGMENT_RADIUS = 5; - this.HOVER_PREVIEW_CURVE_STROKE_WIDTH = 2; + this.HOVER_PREVIEW_CURVE_STROKE_WIDTH = 3; this.HOVER_PREVIEW_CURVE_STROKE_COLOR = this.HOVER_PREVIEW_SEGMENT_STROKE_COLOR; this.hitResult = new this.paper.HitResult(); @@ -76,12 +76,12 @@ Wick.Tools.PathCursor = class extends Wick.Tool { // Hovering over a segment, draw a circle where the segment is this.hoverPreview = new this.paper.Path.Circle(this.hitResult.segment.point, this.HOVER_PREVIEW_SEGMENT_RADIUS/this.paper.view.zoom); this.hoverPreview.strokeColor = this.HOVER_PREVIEW_SEGMENT_STROKE_COLOR; - this.hoverPreview.strokeWidth = this.HOVER_PREVIEW_SEGMENT_STROKE_WIDTH; + this.hoverPreview.strokeWidth = this.HOVER_PREVIEW_SEGMENT_STROKE_WIDTH / this.paper.view.zoom; this.hoverPreview.fillColor = this.HOVER_PREVIEW_SEGMENT_FILL_COLOR; } else if (this.hitResult.type === 'curve' && !this.hitResult.item.data.isSelectionBoxGUI) { // Hovering over a curve, render a copy of the curve that can be bent this.hoverPreview = new this.paper.Path(); - this.hoverPreview.strokeWidth = this.HOVER_PREVIEW_CURVE_STROKE_WIDTH; + this.hoverPreview.strokeWidth = this.HOVER_PREVIEW_CURVE_STROKE_WIDTH / this.paper.view.zoom; this.hoverPreview.strokeColor = this.HOVER_PREVIEW_CURVE_STROKE_COLOR; this.hoverPreview.add(new this.paper.Point(this.hitResult.location.curve.point1)); this.hoverPreview.add(new this.paper.Point(this.hitResult.location.curve.point2)); @@ -261,7 +261,7 @@ Wick.Tools.PathCursor = class extends Wick.Tool { curves: true, segments: true, handles: this.detailedEditing !== null, - tolerance: this.SELECTION_TOLERANCE, + tolerance: this.SELECTION_TOLERANCE / this.paper.view.zoom, match: (result => { return result.item !== this.hoverPreview && !result.item.data.isBorder; diff --git a/engine/src/view/paper-ext/Paper.SelectionBox.js b/engine/src/view/paper-ext/Paper.SelectionBox.js index 8c4ae209c..45df7e778 100644 --- a/engine/src/view/paper-ext/Paper.SelectionBox.js +++ b/engine/src/view/paper-ext/Paper.SelectionBox.js @@ -96,7 +96,7 @@ paper.SelectionBox = class { this._box = new this.paper.Path.Rectangle({ from: this._start, to: this._end, - strokeWidth: 1, + strokeWidth: 1 / this.paper.view.zoom, strokeColor: 'black', }); } diff --git a/engine/src/view/paper-ext/Paper.SelectionWidget.js b/engine/src/view/paper-ext/Paper.SelectionWidget.js index 925d5f071..6bc3b8a2a 100644 --- a/engine/src/view/paper-ext/Paper.SelectionWidget.js +++ b/engine/src/view/paper-ext/Paper.SelectionWidget.js @@ -547,7 +547,7 @@ class SelectionWidget { name: 'border', from: this.boundingBox.topLeft, to: this.boundingBox.bottomRight, - strokeWidth: SelectionWidget.BOX_STROKE_WIDTH, + strokeWidth: SelectionWidget.BOX_STROKE_WIDTH / paper.view.zoom, strokeColor: SelectionWidget.BOX_STROKE_COLOR, insert: false, }); @@ -563,7 +563,7 @@ class SelectionWidget { var border = new paper.Path.Rectangle({ from: bounds.topLeft, to: bounds.bottomRight, - strokeWidth: SelectionWidget.BOX_STROKE_WIDTH, + strokeWidth: SelectionWidget.BOX_STROKE_WIDTH / paper.view.zoom, strokeColor: SelectionWidget.BOX_STROKE_COLOR, }); //border.rotate(-this.boxRotation, this._center); @@ -668,14 +668,14 @@ class SelectionWidget { outline.remove(); outline.fillColor = 'rgba(0,0,0,0)'; outline.strokeColor = SelectionWidget.GHOST_STROKE_COLOR; - outline.strokeWidth = SelectionWidget.GHOST_STROKE_WIDTH * 2; + outline.strokeWidth = SelectionWidget.GHOST_STROKE_WIDTH * 2 / paper.view.zoom; ghost.addChild(outline); var outline2 = outline.clone(); outline2.remove(); outline2.fillColor = 'rgba(0,0,0,0)'; outline2.strokeColor = '#ffffff'; - outline2.strokeWidth = SelectionWidget.GHOST_STROKE_WIDTH; + outline2.strokeWidth = SelectionWidget.GHOST_STROKE_WIDTH / paper.view.zoom; ghost.addChild(outline2); }); @@ -684,7 +684,7 @@ class SelectionWidget { to: this.boundingBox.bottomRight, fillColor: 'rgba(0,0,0,0)', strokeColor: SelectionWidget.GHOST_STROKE_COLOR, - strokeWidth: SelectionWidget.GHOST_STROKE_WIDTH, + strokeWidth: SelectionWidget.GHOST_STROKE_WIDTH / paper.view.zoom, applyMatrix: false, }); boundsOutline.rotate(this.boxRotation, this._center);