Skip to content

Angle picker update #1048

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 17, 2017
Merged

Angle picker update #1048

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5056f79
WIP draggable angle picker update
paulkaplan Aug 14, 2017
49e6a03
Add arrow svg
paulkaplan Aug 15, 2017
6300304
Fix linting
paulkaplan Aug 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 23 additions & 8 deletions core/css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -624,25 +624,40 @@ Blockly.Css.CONTENT = [
'}',

'.blocklyAngleCircle {',
'stroke: #444;',
'stroke: ' + Blockly.Colours.motion.tertiary + ';',

This comment was marked as abuse.

Sign in to view

'stroke-width: 1;',
'fill: #ddd;',
'fill-opacity: .8;',
'fill: ' + Blockly.Colours.motion.secondary + ';',
'}',

'.blocklyAngleCenterPoint {',
'stroke: #fff;',
'stroke-width: 1;',
'fill: #fff;',
'}',

'.blocklyAngleDragHandle {',
'stroke: #fff;',
'stroke-width: 5;',
'stroke-opacity: 0.25;',
'fill: #fff;',
'cursor: pointer;',
'}',


'.blocklyAngleMarks {',
'stroke: #444;',
'stroke: #fff;',
'stroke-width: 1;',
'stroke-opacity: 0.5;',
'}',

'.blocklyAngleGauge {',
'fill: #f88;',
'fill-opacity: .8;',
'fill: #fff;',
'fill-opacity: 0.20;',
'}',

'.blocklyAngleLine {',
'stroke: #f00;',
'stroke-width: 2;',
'stroke: #fff;',
'stroke-width: 1;',
'stroke-linecap: round;',
'pointer-events: none;',
'}',
Expand Down
133 changes: 106 additions & 27 deletions core/field_angle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ Blockly.FieldAngle.ROUND = 15;
/**
* Half the width of protractor image.
*/
Blockly.FieldAngle.HALF = 100 / 2;
Blockly.FieldAngle.HALF = 120 / 2;

/* The following two settings work together to set the behaviour of the angle
* picker. While many combinations are possible, two modes are typical:
Expand Down Expand Up @@ -95,11 +95,31 @@ Blockly.FieldAngle.OFFSET = 90;
*/
Blockly.FieldAngle.WRAP = 180;

/**
* Radius of drag handle
*/
Blockly.FieldAngle.HANDLE_RADIUS = 10;

/**
* Width of drag handle arrow
*/
Blockly.FieldAngle.ARROW_WIDTH = Blockly.FieldAngle.HANDLE_RADIUS;

/**
* Radius of protractor circle. Slightly smaller than protractor size since
* otherwise SVG crops off half the border at the edges.
*/
Blockly.FieldAngle.RADIUS = Blockly.FieldAngle.HALF - 1;
Blockly.FieldAngle.RADIUS = Blockly.FieldAngle.HALF - Blockly.FieldAngle.HANDLE_RADIUS - 1;

/**
* Radius of central dot circle.
*/
Blockly.FieldAngle.CENTER_RADIUS = 2;

/**
* Path to the arrow svg icon.
*/
Blockly.FieldAngle.ARROW_SVG_PATH = 'icons/arrow.svg';

/**
* Clean up this FieldAngle, as well as the inherited FieldTextInput.
Expand All @@ -111,11 +131,14 @@ Blockly.FieldAngle.prototype.dispose_ = function() {
return function() {
Blockly.FieldAngle.superClass_.dispose_.call(thisField)();
thisField.gauge_ = null;
if (thisField.clickWrapper_) {
Blockly.unbindEvent_(thisField.clickWrapper_);
if (thisField.mouseDownWrapper_) {

This comment was marked as abuse.

Sign in to view

Blockly.unbindEvent_(thisField.mouseDownWrapper_);
}
if (thisField.mouseUpWrapper_) {
Blockly.unbindEvent_(thisField.mouseUpWrapper_);
}
if (thisField.moveWrapper_) {
Blockly.unbindEvent_(thisField.moveWrapper_);
if (thisField.mouseMoveWrapper_) {
Blockly.unbindEvent_(thisField.mouseMoveWrapper_);
}
};
};
Expand Down Expand Up @@ -149,50 +172,97 @@ Blockly.FieldAngle.prototype.showEditor_ = function() {
}, svg);
this.gauge_ = Blockly.utils.createSvgElement('path',
{'class': 'blocklyAngleGauge'}, svg);
// The moving line, x2 and y2 are set in updateGraph_
this.line_ = Blockly.utils.createSvgElement('line',{
'x1': Blockly.FieldAngle.HALF,
'y1': Blockly.FieldAngle.HALF,
'class': 'blocklyAngleLine'
}, svg);
// The fixed vertical line at the offset
var offsetRadians = Math.PI * Blockly.FieldAngle.OFFSET / 180;
Blockly.utils.createSvgElement('line', {
'x1': Blockly.FieldAngle.HALF,
'y1': Blockly.FieldAngle.HALF,
'x2': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS * Math.cos(offsetRadians),
'y2': Blockly.FieldAngle.HALF - Blockly.FieldAngle.RADIUS * Math.sin(offsetRadians),
'class': 'blocklyAngleLine'
}, svg);
// Draw markers around the edge.
for (var angle = 0; angle < 360; angle += 15) {
Blockly.utils.createSvgElement('line', {
'x1': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS,
'x1': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS - 13,
'y1': Blockly.FieldAngle.HALF,
'x2': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS -
(angle % 45 == 0 ? 10 : 5),
'x2': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS - 7,
'y2': Blockly.FieldAngle.HALF,
'class': 'blocklyAngleMarks',
'transform': 'rotate(' + angle + ',' +
Blockly.FieldAngle.HALF + ',' + Blockly.FieldAngle.HALF + ')'
}, svg);
}
// Center point

This comment was marked as abuse.

Sign in to view

Blockly.utils.createSvgElement('circle', {
'cx': Blockly.FieldAngle.HALF, 'cy': Blockly.FieldAngle.HALF,
'r': Blockly.FieldAngle.CENTER_RADIUS,
'class': 'blocklyAngleCenterPoint'
}, svg);
// Handle group: a circle and the arrow image
this.handle_ = Blockly.utils.createSvgElement('g', {}, svg);
Blockly.utils.createSvgElement('circle', {
'cx': 0,
'cy': 0,
'r': Blockly.FieldAngle.HANDLE_RADIUS,
'class': 'blocklyAngleDragHandle'
}, this.handle_);
this.arrowSvg_ = Blockly.utils.createSvgElement(
'image',
{
'width': Blockly.FieldAngle.ARROW_WIDTH,
'height': Blockly.FieldAngle.ARROW_WIDTH,
'x': -Blockly.FieldAngle.ARROW_WIDTH / 2,
'y': -Blockly.FieldAngle.ARROW_WIDTH / 2
},
this.handle_
);
this.arrowSvg_.setAttributeNS(
'http://www.w3.org/1999/xlink',
'xlink:href',
Blockly.mainWorkspace.options.pathToMedia + Blockly.FieldAngle.ARROW_SVG_PATH
);

Blockly.DropDownDiv.setColour(this.sourceBlock_.parentBlock_.getColour(),
this.sourceBlock_.getColourTertiary());
Blockly.DropDownDiv.setCategory(this.sourceBlock_.parentBlock_.getCategory());
Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_);

// The angle picker is different from other fields in that it updates on
// mousemove even if it's not in the middle of a drag. In future we may
// change this behavior. For now, using bindEvent_ instead of
// bindEventWithChecks_ allows it to work without a mousedown/touchstart.
this.clickWrapper_ =
Blockly.bindEvent_(svg, 'click', this, function() {
Blockly.WidgetDiv.hide();
Blockly.DropDownDiv.hide();
Blockly.unbindEvent_(this.moveWrapper_);
});
this.moveWrapper_ =
Blockly.bindEvent_(svg, 'mousemove', this, this.onMouseMove);
this.mouseDownWrapper_ =
Blockly.bindEvent_(this.handle_, 'mousedown', this, this.onMouseDown);

this.updateGraph_();
};
/**

This comment was marked as abuse.

Sign in to view

* Set the angle to match the mouse's position.
* @param {!Event} e Mouse move event.
*/
Blockly.FieldAngle.prototype.onMouseDown = function() {
this.mouseMoveWrapper_ = Blockly.bindEvent_(document.body, 'mousemove', this, this.onMouseMove);
this.mouseUpWrapper_ = Blockly.bindEvent_(document.body, 'mouseup', this, this.onMouseUp);
};

/**
* Set the angle to match the mouse's position.
* @param {!Event} e Mouse move event.
*/
Blockly.FieldAngle.prototype.onMouseUp = function() {
Blockly.unbindEvent_(this.mouseMoveWrapper_);
Blockly.unbindEvent_(this.mouseUpWrapper_);
};

/**
* Set the angle to match the mouse's position.
* @param {!Event} e Mouse move event.
*/
Blockly.FieldAngle.prototype.onMouseMove = function(e) {
e.preventDefault();
var bBox = this.gauge_.ownerSVGElement.getBoundingClientRect();
var dx = e.clientX - bBox.left - Blockly.FieldAngle.HALF;
var dy = e.clientY - bBox.top - Blockly.FieldAngle.HALF;
Expand Down Expand Up @@ -247,7 +317,7 @@ Blockly.FieldAngle.prototype.updateGraph_ = function() {
if (!this.gauge_) {
return;
}
var angleDegrees = Number(this.getText()) + Blockly.FieldAngle.OFFSET;
var angleDegrees = Number(this.getText()) % 360 + Blockly.FieldAngle.OFFSET;
var angleRadians = goog.math.toRadians(angleDegrees);
var path = ['M ', Blockly.FieldAngle.HALF, ',', Blockly.FieldAngle.HALF];
var x2 = Blockly.FieldAngle.HALF;
Expand All @@ -261,19 +331,28 @@ Blockly.FieldAngle.prototype.updateGraph_ = function() {
}
x2 += Math.cos(angleRadians) * Blockly.FieldAngle.RADIUS;
y2 -= Math.sin(angleRadians) * Blockly.FieldAngle.RADIUS;
// Don't ask how the flag calculations work. They just do.
var largeFlag = Math.abs(Math.floor((angleRadians - angle1) / Math.PI) % 2);
if (Blockly.FieldAngle.CLOCKWISE) {
largeFlag = 1 - largeFlag;
}
// Use large arc only if input value is greater than wrap
var largeFlag = Math.abs(angleDegrees - Blockly.FieldAngle.OFFSET) > 180 ? 1 : 0;
var sweepFlag = Number(Blockly.FieldAngle.CLOCKWISE);
if (angleDegrees < Blockly.FieldAngle.OFFSET) {
sweepFlag = 1 - sweepFlag; // Sweep opposite direction if less than the offset
}
path.push(' l ', x1, ',', y1,
' A ', Blockly.FieldAngle.RADIUS, ',', Blockly.FieldAngle.RADIUS,
' 0 ', largeFlag, ' ', sweepFlag, ' ', x2, ',', y2, ' z');

// Image rotation needs to be set in degrees
if (Blockly.FieldAngle.CLOCKWISE) {
var imageRotation = angleDegrees + 2 * Blockly.FieldAngle.OFFSET;
} else {
var imageRotation = -angleDegrees;
}
this.arrowSvg_.setAttribute('transform', 'rotate(' + (imageRotation) + ')');
}
this.gauge_.setAttribute('d', path.join(''));
this.line_.setAttribute('x2', x2);
this.line_.setAttribute('y2', y2);
this.handle_.setAttribute('transform', 'translate(' + x2 + ',' + y2 +')');
};

/**
Expand Down
12 changes: 12 additions & 0 deletions media/icons/arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.