client/notes: add scaling notes with shift key
This commit is contained in:
parent
1b62daed9a
commit
9013f15c1a
1 changed files with 66 additions and 2 deletions
|
@ -39,6 +39,18 @@ function _clearEditedNote(hostNode) {
|
|||
return node !== null;
|
||||
}
|
||||
|
||||
function _getNoteSize(note) {
|
||||
const min = new Point(Infinity, Infinity);
|
||||
const max = new Point(-Infinity, -Infinity);
|
||||
for (let point of note.polygon) {
|
||||
min.x = Math.min(min.x, point.x);
|
||||
min.y = Math.min(min.y, point.y);
|
||||
max.x = Math.max(max.x, point.x);
|
||||
max.y = Math.max(max.y, point.y);
|
||||
}
|
||||
return new Point(max.x - min.x, max.y - min.y);
|
||||
}
|
||||
|
||||
class State {
|
||||
constructor(control) {
|
||||
this._control = control;
|
||||
|
@ -176,13 +188,18 @@ class SelectedState extends ActiveState {
|
|||
}
|
||||
|
||||
evtNoteMouseDown(e, hoveredNote) {
|
||||
const mousePoint = this._getPointFromEvent(e);
|
||||
const mouseScreenPoint = this._getScreenPoint(mousePoint);
|
||||
if (e.shiftKey) {
|
||||
this._control._state = new ScalingNoteState(
|
||||
this._control, this._note, mousePoint);
|
||||
return;
|
||||
}
|
||||
if (this._note !== hoveredNote) {
|
||||
this._control._state =
|
||||
new SelectedState(this._control, hoveredNote);
|
||||
return;
|
||||
}
|
||||
const mousePoint = this._getPointFromEvent(e);
|
||||
const mouseScreenPoint = this._getScreenPoint(mousePoint);
|
||||
this._clickTimeout = window.setTimeout(() => {
|
||||
for (let polygonPoint of this._note.polygon) {
|
||||
const distance = _getDistance(
|
||||
|
@ -214,6 +231,11 @@ class SelectedState extends ActiveState {
|
|||
evtCanvasMouseDown(e) {
|
||||
const mousePoint = this._getPointFromEvent(e);
|
||||
const mouseScreenPoint = this._getScreenPoint(mousePoint);
|
||||
if (e.shiftKey) {
|
||||
this._control._state = new ScalingNoteState(
|
||||
this._control, this._note, mousePoint);
|
||||
return;
|
||||
}
|
||||
for (let polygonPoint of this._note.polygon) {
|
||||
const distance = _getDistance(
|
||||
mouseScreenPoint,
|
||||
|
@ -323,6 +345,48 @@ class MovingNoteState extends ActiveState {
|
|||
}
|
||||
}
|
||||
|
||||
class ScalingNoteState extends ActiveState {
|
||||
constructor(control, note, mousePoint) {
|
||||
super(control, note);
|
||||
this._originalPolygon = [...note.polygon].map(
|
||||
point => ({x: point.x, y: point.y}));
|
||||
this._originalMousePoint = mousePoint;
|
||||
this._originalSize = _getNoteSize(note);
|
||||
}
|
||||
|
||||
evtCanvasKeyDown(e) {
|
||||
if (e.which == KEY_ESCAPE) {
|
||||
for (let i of misc.range(this._note.polygon.length)) {
|
||||
this._note.polygon.at(i).x = this._originalPolygon[i].x;
|
||||
this._note.polygon.at(i).y = this._originalPolygon[i].y;
|
||||
}
|
||||
this._control._state = new SelectedState(this._control, this._note);
|
||||
}
|
||||
}
|
||||
|
||||
evtCanvasMouseMove(e) {
|
||||
const mousePoint = this._getPointFromEvent(e);
|
||||
const originalMousePoint = this._originalMousePoint;
|
||||
const originalSize = this._originalSize;
|
||||
for (let i of misc.range(this._note.polygon.length)) {
|
||||
const polygonPoint = this._note.polygon.at(i);
|
||||
const originalPolygonPoint = this._originalPolygon[i];
|
||||
polygonPoint.x =
|
||||
originalMousePoint.x +
|
||||
(originalPolygonPoint.x - originalMousePoint.x) *
|
||||
(1 + (mousePoint.x - originalMousePoint.x) / originalSize.x);
|
||||
polygonPoint.y =
|
||||
originalMousePoint.y +
|
||||
(originalPolygonPoint.y - originalMousePoint.y) *
|
||||
(1 + (mousePoint.y - originalMousePoint.y) / originalSize.y);
|
||||
}
|
||||
}
|
||||
|
||||
evtCanvasMouseUp(e) {
|
||||
this._control._state = new SelectedState(this._control, this._note);
|
||||
}
|
||||
}
|
||||
|
||||
class ReadyToDrawState extends ActiveState {
|
||||
constructor(control) {
|
||||
super(control);
|
||||
|
|
Loading…
Reference in a new issue