Skip to content

Commit 935f744

Browse files
ruhleyruhley
committed
Restricting movement if round to inside the circle
1 parent f12eda0 commit 935f744

File tree

5 files changed

+98
-18
lines changed

5 files changed

+98
-18
lines changed

‎examples/01-simple.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,11 @@ <h1>AngularJS Color Picker</h1>
7171
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
7272
</div>
7373

74+
<div class="row">
75+
<label class="control-label">Round (round) - whether or not to display the picker as a circle</label>
76+
<select ng-model="options.round" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
77+
</div>
78+
7479
<div class="row">
7580
<label class="control-label">Close Visible (close.show) - whether or not to display the close button - false, true</label>
7681
<select ng-model="options.close.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>

‎examples/05-testing-bootstrap.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ <h1>AngularJS Color Picker</h1>
2929
<select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
3030
</div>
3131

32+
<div class="row">
33+
<label class="control-label">Hue (hue) - whether or not to display the hue control</label>
34+
<select ng-model="options.hue" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
35+
</div>
36+
3237
<div class="row">
3338
<label class="control-label">Alpha (alpha) - whether or not to display the alpha control</label>
3439
<select ng-model="options.alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
@@ -69,6 +74,56 @@ <h1>AngularJS Color Picker</h1>
6974
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
7075
</div>
7176

77+
<div class="row">
78+
<label class="control-label">Round (round) - whether or not to display the picker as a circle</label>
79+
<select ng-model="options.round" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
80+
</div>
81+
82+
<div class="row">
83+
<label class="control-label">Close Visible (close.show) - whether or not to display the close button - false, true</label>
84+
<select ng-model="options.close.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
85+
</div>
86+
87+
<div class="row">
88+
<label class="control-label">Close Label (close.label) - The label of the close button - "Close"</label>
89+
<input type="text" ng-model="options.close.label" placeholder="Close" class="form-control" />
90+
</div>
91+
92+
<div class="row">
93+
<label class="control-label">Close class (close.class) - The class of the close button - ""</label>
94+
<input type="text" ng-model="options.close.class" placeholder="Class" class="form-control" />
95+
</div>
96+
97+
<div class="row">
98+
<label class="control-label">Clear Visible (clear.show) - whether or not to display the clear button - false, true</label>
99+
<select ng-model="options.clear.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
100+
</div>
101+
102+
<div class="row">
103+
<label class="control-label">Clear Label (clear.label) - The label of the clear button - "Clear"</label>
104+
<input type="text" ng-model="options.clear.label" placeholder="Clear" class="form-control" />
105+
</div>
106+
107+
<div class="row">
108+
<label class="control-label">Clear class (clear.class) - The class of the clear button - ""</label>
109+
<input type="text" ng-model="options.clear.class" placeholder="Class" class="form-control" />
110+
</div>
111+
112+
<div class="row">
113+
<label class="control-label">Reset Visible (reset.show) - whether or not to display the reset button - false, true</label>
114+
<select ng-model="options.reset.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
115+
</div>
116+
117+
<div class="row">
118+
<label class="control-label">Reset Label (reset.label) - The label of the reset button - "Reset"</label>
119+
<input type="text" ng-model="options.reset.label" placeholder="Reset" class="form-control" />
120+
</div>
121+
122+
<div class="row">
123+
<label class="control-label">Reset class (reset.class) - The class of the reset button - ""</label>
124+
<input type="text" ng-model="options.reset.class" placeholder="Class" class="form-control" />
125+
</div>
126+
72127
<div class="row">
73128
<label class="control-label">Color</label>
74129
<color-picker

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angularjs-color-picker",
33
"description": "Color Picker Directive For AngularJS",
4-
"version": "2.1.7",
4+
"version": "2.2.0",
55
"license": "MIT",
66
"main": "dist/angularjs-color-picker.min.js",
77
"dependencies": {

‎src/scripts/controller.js‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,8 @@ export default class AngularColorPickerController {
191191
'AngularColorPickerController.options.swatch',
192192
'AngularColorPickerController.options.pos',
193193
'AngularColorPickerController.options.inline',
194-
'AngularColorPickerController.options.placeholder'
194+
'AngularColorPickerController.options.placeholder',
195+
'AngularColorPickerController.options.round',
195196
],
196197
this.reInit.bind(this)
197198
);
@@ -393,6 +394,10 @@ export default class AngularColorPickerController {
393394
});
394395

395396
this.visible = this.options.inline;
397+
398+
if (this.options.round) {
399+
this.options.hue = false;
400+
}
396401
}
397402

398403
merge(options, defaultOptions) {
@@ -515,9 +520,11 @@ export default class AngularColorPickerController {
515520
var el = angular.element(this.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
516521
var bounding = container.getBoundingClientRect();
517522

518-
el.css({
519-
'top': (bounding.height * this.lightnessPos / 100) + 'px',
520-
});
523+
if (!this.options.round) {
524+
el.css({
525+
'top': (bounding.height * this.lightnessPos / 100) + 'px',
526+
});
527+
}
521528
});
522529
}
523530

@@ -527,7 +534,7 @@ export default class AngularColorPickerController {
527534
var el = angular.element(this.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
528535
var bounding = container.getBoundingClientRect();
529536

530-
if(this.options.round) {
537+
if (this.options.round) {
531538
el.css({
532539
left: (bounding.width * this.xPos / 100) + 'px',
533540
top: (bounding.height * this.yPos / 100) + 'px',
@@ -542,10 +549,6 @@ export default class AngularColorPickerController {
542549
}
543550

544551
gridUpdate () {
545-
if(!this.options.updateBackgroundColor) {
546-
return;
547-
}
548-
549552
var el = angular.element(this.$element[0].querySelector('.color-picker-grid'));
550553

551554
el.css({
@@ -674,17 +677,18 @@ export default class AngularColorPickerController {
674677
var el = this.find('.color-picker-grid-inner');
675678
var offset = this.offset(el);
676679

677-
if(this.options.round) {
680+
if (this.options.round) {
678681
var dx = ((event.pageX - offset.left) * 2.0 / el.prop('offsetWidth')) - 1.0;
679682
var dy = -((event.pageY - offset.top) * 2.0 / el.prop('offsetHeight')) + 1.0;
680683

681-
var tmpSaturation = Math.sqrt(dx*dx + dy*dy);
684+
var tmpSaturation = Math.sqrt(dx * dx + dy * dy);
682685
var tmpHue = Math.atan2(dy, dx);
683686

684687
this.saturation = 100 * tmpSaturation;
685688
var degHue = tmpHue * 57.29577951308233; // rad to deg
686-
if (degHue < 0.0)
689+
if (degHue < 0.0) {
687690
degHue += 360.0;
691+
}
688692
this.hue = degHue;
689693
this.lightness = 100;
690694
} else {
@@ -710,10 +714,25 @@ export default class AngularColorPickerController {
710714
if (this.options.round) {
711715
var angle = this.hue * 0.01745329251994; // deg to rad
712716
var px = Math.cos(angle) * this.saturation;
713-
var py = -Math.sin(angle) * this.saturation ;
717+
var py = -Math.sin(angle) * this.saturation;
714718

715719
this.xPos = (px + 100.0) * 0.5;
716-
this.yPos = (py + 100.0) * 0.5;
720+
this.yPos = (py + 100.0) * 0.5;
721+
722+
// because we are using percentages this can be half of 100%
723+
var center = 50;
724+
// distance of pointer from the center of the circle
725+
var distance = Math.pow(center - this.xPos, 2) + Math.pow(center - this.yPos, 2);
726+
// distance of edge of circle from the center of the circle
727+
var radius = Math.pow(center, 2);
728+
729+
// if not inside the circle
730+
if (distance > radius) {
731+
var rads = Math.atan2(this.yPos - center, this.xPos - center);
732+
733+
this.xPos = Math.cos(rads) * center + center;
734+
this.yPos = Math.sin(rads) * center + center;
735+
}
717736
} else {
718737
this.saturationPos = (this.saturation / 100) * 100;
719738

0 commit comments

Comments
 (0)