Title: [234458] trunk/Source/WebKit
- Revision
- 234458
- Author
- [email protected]
- Date
- 2018-08-01 08:40:48 -0700 (Wed, 01 Aug 2018)
Log Message
[iOS] WKColorPicker's selection indicator doesn't always cover the selected swatch
https://bugs.webkit.org/show_bug.cgi?id=188124
Patch by Aditya Keerthi <[email protected]> on 2018-08-01
Reviewed by Wenson Hsieh.
- On iPhone, the size of an individual color swatch can change on rotation. In
this case, we should resize the selection indicator along with the swatch. Added
a new delegate method to WKColorMatrixViewDelegate to notify the color picker if
the matrix was redrawn. We then resize the selection indicator to match the
selected swatch's size.
- On iPad, the selection indicator should have rounded corners if it's at the
corner of the color picker. Otherwise, part of the indicator will be hidden by
the popover. The selected swatch's position is checked before drawing the
indicator. If it's at one of the four corners of the picker, the appropriate mask
is applied to the color selection indicator's border.
* UIProcess/ios/forms/WKFormColorPicker.h:
* UIProcess/ios/forms/WKFormColorPicker.mm:
(-[WKColorMatrixView layoutSubviews]):
(-[WKColorPicker initWithView:]):
(-[WKColorPicker drawSelectionIndicatorForColorButton:]):
(-[WKColorPicker colorMatrixViewDidLayoutSubviews:]):
(-[WKColorPicker colorMatrixView:didTapColorButton:]):
(-[WKColorPicker didPanColors:]):
Modified Paths
Diff
Modified: trunk/Source/WebKit/ChangeLog (234457 => 234458)
--- trunk/Source/WebKit/ChangeLog 2018-08-01 13:35:38 UTC (rev 234457)
+++ trunk/Source/WebKit/ChangeLog 2018-08-01 15:40:48 UTC (rev 234458)
@@ -1,3 +1,31 @@
+2018-08-01 Aditya Keerthi <[email protected]>
+
+ [iOS] WKColorPicker's selection indicator doesn't always cover the selected swatch
+ https://bugs.webkit.org/show_bug.cgi?id=188124
+
+ Reviewed by Wenson Hsieh.
+
+ - On iPhone, the size of an individual color swatch can change on rotation. In
+ this case, we should resize the selection indicator along with the swatch. Added
+ a new delegate method to WKColorMatrixViewDelegate to notify the color picker if
+ the matrix was redrawn. We then resize the selection indicator to match the
+ selected swatch's size.
+
+ - On iPad, the selection indicator should have rounded corners if it's at the
+ corner of the color picker. Otherwise, part of the indicator will be hidden by
+ the popover. The selected swatch's position is checked before drawing the
+ indicator. If it's at one of the four corners of the picker, the appropriate mask
+ is applied to the color selection indicator's border.
+
+ * UIProcess/ios/forms/WKFormColorPicker.h:
+ * UIProcess/ios/forms/WKFormColorPicker.mm:
+ (-[WKColorMatrixView layoutSubviews]):
+ (-[WKColorPicker initWithView:]):
+ (-[WKColorPicker drawSelectionIndicatorForColorButton:]):
+ (-[WKColorPicker colorMatrixViewDidLayoutSubviews:]):
+ (-[WKColorPicker colorMatrixView:didTapColorButton:]):
+ (-[WKColorPicker didPanColors:]):
+
2018-08-01 Zan Dobersek <[email protected]>
[CoordGraphics] Move CoordinatedBackingStore to WebCore
Modified: trunk/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.h (234457 => 234458)
--- trunk/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.h 2018-08-01 13:35:38 UTC (rev 234457)
+++ trunk/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.h 2018-08-01 15:40:48 UTC (rev 234458)
@@ -34,6 +34,7 @@
@protocol WKColorMatrixViewDelegate
- (void)colorMatrixView:(WKColorMatrixView *)matrixView didTapColorButton:(WKColorButton *)colorButton;
+- (void)colorMatrixViewDidLayoutSubviews:(WKColorMatrixView *)matrixView;
@end
@interface WKColorPicker : NSObject<WKFormControl, WKColorMatrixViewDelegate>
Modified: trunk/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.mm (234457 => 234458)
--- trunk/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.mm 2018-08-01 13:35:38 UTC (rev 234457)
+++ trunk/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.mm 2018-08-01 15:40:48 UTC (rev 234458)
@@ -41,7 +41,8 @@
SOFT_LINK_CLASS(PencilKit, PKColorMatrixView)
static const CGFloat additionalKeyboardAffordance = 80;
-static const CGFloat colorSelectionIndicatorBorderWidth = 2;
+static const CGFloat colorSelectionIndicatorBorderWidth = 4;
+static const CGFloat colorSelectionIndicatorCornerRadius = 13;
static const CGFloat pickerWidthForPopover = 280;
static const CGFloat topColorMatrixPadding = 8;
@@ -132,6 +133,8 @@
button.frame = CGRectMake(col * buttonWidth, row * buttonHeight, buttonWidth, buttonHeight);
}
}
+
+ [self.delegate colorMatrixViewDidLayoutSubviews:self];
}
- (void)colorButtonTapped:(WKColorButton *)colorButton
@@ -148,8 +151,11 @@
RetainPtr<UIView> _colorPicker;
RetainPtr<UIView> _colorSelectionIndicator;
+ RetainPtr<CAShapeLayer> _colorSelectionIndicatorBorder;
+
RetainPtr<WKColorMatrixView> _topColorMatrix;
RetainPtr<WKColorMatrixView> _mainColorMatrix;
+ WeakObjCPtr<WKColorButton> _selectedColorButton;
RetainPtr<UIPanGestureRecognizer> _colorPanGR;
}
@@ -190,10 +196,15 @@
[_colorPicker addSubview:_topColorMatrix.get()];
_colorSelectionIndicator = adoptNS([[UIView alloc] initWithFrame:CGRectZero]);
- [[_colorSelectionIndicator layer] setBorderColor:[[UIColor whiteColor] CGColor]];
- [[_colorSelectionIndicator layer] setBorderWidth:colorSelectionIndicatorBorderWidth];
+ [_colorSelectionIndicator setClipsToBounds:YES];
[_colorPicker addSubview:_colorSelectionIndicator.get()];
+ _colorSelectionIndicatorBorder = adoptNS([[CAShapeLayer alloc] init]);
+ [_colorSelectionIndicatorBorder setLineWidth:colorSelectionIndicatorBorderWidth];
+ [_colorSelectionIndicatorBorder setStrokeColor:[UIColor whiteColor].CGColor];
+ [_colorSelectionIndicatorBorder setFillColor:[UIColor clearColor].CGColor];
+ [[_colorSelectionIndicator layer] addSublayer:_colorSelectionIndicatorBorder.get()];
+
_colorPanGR = adoptNS([[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(didPanColors:)]);
[_colorPicker addGestureRecognizer:_colorPanGR.get()];
@@ -200,6 +211,38 @@
return self;
}
+- (void)drawSelectionIndicatorForColorButton:(WKColorButton *)colorButton
+{
+ _selectedColorButton = colorButton;
+
+ CGRect frame = [_colorPicker convertRect:colorButton.bounds fromView:colorButton];
+ [_colorSelectionIndicator setFrame:frame];
+
+ UIRectCorner roundCorner = 0;
+ if (currentUserInterfaceIdiomIsPad()) {
+ CGRect colorPickerBounds = [_colorPicker bounds];
+
+ bool minXEqual = std::abs(CGRectGetMinX(frame) - CGRectGetMinX(colorPickerBounds)) < FLT_EPSILON;
+ bool minYEqual = std::abs(CGRectGetMinY(frame) - CGRectGetMinY(colorPickerBounds)) < FLT_EPSILON;
+ bool maxXEqual = std::abs(CGRectGetMaxX(frame) - CGRectGetMaxX(colorPickerBounds)) < FLT_EPSILON;
+ bool maxYEqual = std::abs(CGRectGetMaxY(frame) - CGRectGetMaxY(colorPickerBounds)) < FLT_EPSILON;
+
+ // On iPad, round one corner of the indicator if it's at the corner of the picker, to match the popover.
+ if (minXEqual && minYEqual)
+ roundCorner = UIRectCornerTopLeft;
+ else if (maxXEqual && minYEqual)
+ roundCorner = UIRectCornerTopRight;
+ else if (minXEqual && maxYEqual)
+ roundCorner = UIRectCornerBottomLeft;
+ else if (maxXEqual && maxYEqual)
+ roundCorner = UIRectCornerBottomRight;
+ }
+
+ UIBezierPath *cornerMaskPath = [UIBezierPath bezierPathWithRoundedRect:colorButton.bounds byRoundingCorners:roundCorner cornerRadii:CGSizeMake(colorSelectionIndicatorCornerRadius, colorSelectionIndicatorCornerRadius)];
+ [_colorSelectionIndicatorBorder setFrame:colorButton.bounds];
+ [_colorSelectionIndicatorBorder setPath:cornerMaskPath.CGPath];
+}
+
- (void)setControlValueFromUIColor:(UIColor *)uiColor
{
WebCore::Color color(uiColor.CGColor);
@@ -223,9 +266,18 @@
#pragma mark WKColorMatrixViewDelegate
+- (void)colorMatrixViewDidLayoutSubviews:(WKColorMatrixView *)matrixView
+{
+ if ([_selectedColorButton superview] == matrixView)
+ [self drawSelectionIndicatorForColorButton:_selectedColorButton.get().get()];
+}
+
- (void)colorMatrixView:(WKColorMatrixView *)matrixView didTapColorButton:(WKColorButton *)colorButton
{
- [_colorSelectionIndicator setFrame:[_colorPicker convertRect:colorButton.bounds fromView:colorButton]];
+ if (_selectedColorButton.get().get() == colorButton)
+ return;
+
+ [self drawSelectionIndicatorForColorButton:colorButton];
[self setControlValueFromUIColor:colorButton.color];
}
@@ -236,8 +288,12 @@
CGPoint location = [gestureRecognizer locationInView:gestureRecognizer.view];
UIView *view = [gestureRecognizer.view hitTest:location withEvent:nil];
if ([view isKindOfClass:[WKColorButton class]]) {
- [_colorSelectionIndicator setFrame:[_colorPicker convertRect:[view bounds] fromView:view]];
- [self setControlValueFromUIColor:[(WKColorButton *)view color]];
+ WKColorButton *colorButton = (WKColorButton *)view;
+ if (_selectedColorButton.get().get() == colorButton)
+ return;
+
+ [self drawSelectionIndicatorForColorButton:colorButton];
+ [self setControlValueFromUIColor:colorButton.color];
}
}
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
