javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: shadow wip

Browse Source
This commit is contained in:
Nathan Walker
2022-03-02 20:06:51 -08:00
parent c1e431a0f7
commit b2fd5561f2
6 changed files with 227 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/toolbox/src/app-root.xml
View File

@ -1,2 +1,2 @@
<Frame defaultPage="main-page"> <Frame defaultPage="pages/box-shadow">
</Frame> </Frame>

16
apps/toolbox/src/app.css
View File

@ -57,8 +57,6 @@ Button {
.box-shadow-demo .box-shadow-prop-controls TextField{ .box-shadow-demo .box-shadow-prop-controls TextField{
margin-left: 10; margin-left: 10;
padding: 5; padding: 5;
border-bottom-width: 1;
border-color: #65ADF1;
} }
.box-shadow-demo .controls .description { .box-shadow-demo .controls .description {
@ -68,18 +66,22 @@ Button {
margin-bottom: 10; margin-bottom: 10;
} }
.box-shadow-demo .controls Button[selectedAttr=true] { .box-shadow-demo .controls .unselected {
background-color: transparent;
color: #65ADF1;
}
.box-shadow-demo .controls .selected {
background-color: #65ADF1; background-color: #65ADF1;
color: #fff; color: #fff;
} }
.box-shadow-prop-controls .btn-apply { .box-shadow-prop-controls .btn-apply {
background-color: #65ADF1; background-color: #65ADF1;
color: #fff; color: #fff;
padding: 10 15; padding: 5 6;
border-radius: 4; border-radius: 4;
margin-left: 10; margin-right: 8;
font-size: 17; font-size: 11;
font-weight: bold; font-weight: bold;
} }

31
apps/toolbox/src/pages/box-shadow.ts
View File

@ -5,14 +5,17 @@ export function navigatingTo(args: EventData) {
page.bindingContext = new BoxShadowModel(); page.bindingContext = new BoxShadowModel();
} }
const defaultBoxShadow = '0 4 4 4 rgba(0, 0, 0, 0.5)';
// const defaultBoxShadow = '0 10 15 -3 rgba(200, 0, 0, 0.4)';
// const defaultBoxShadow = '5 5 1 1 rgba(255, 0, 0, .9)';
// const defaultBoxShadow = '5 5 5 10 rgba(255, 0, 0, .9)';
export class BoxShadowModel extends Observable { export class BoxShadowModel extends Observable {
private _selectedComponentType: string = 'buttons'; private _selectedComponentType: string = 'buttons';
private _selectedBackgroundType: string; private _selectedBackgroundType: string;
private _selectedBorderType: string; private _selectedBorderType: string;
private _selectedAnimation: string; private _selectedAnimation: string;
private _boxShadow: string = '0 10 15 -3 rgba(200, 0, 0, 0.4)'; private _boxShadow: string = defaultBoxShadow;
// private _boxShadow: string = '5 5 1 1 rgba(255, 0, 0, .9)';
// private _boxShadow: string = '5 5 5 10 rgba(255, 0, 0, .9)';
background: string; background: string;
borderWidth: number; borderWidth: number;
@ -78,7 +81,7 @@ export class BoxShadowModel extends Observable {
this.borderRadius = 10; this.borderRadius = 10;
break; break;
case 'partial': case 'partial':
this.borderRadius = '10 0 0 0'; this.borderRadius = '10 10 0 0';
break; break;
case 'none': case 'none':
this.borderRadius = 0; this.borderRadius = 0;
@ -115,6 +118,26 @@ export class BoxShadowModel extends Observable {
this.notifyPropertyChange('appliedBoxShadow', this.appliedBoxShadow); this.notifyPropertyChange('appliedBoxShadow', this.appliedBoxShadow);
} }
resetAll() {
this._boxShadow = defaultBoxShadow;
this.appliedBoxShadow = null;
this.notifyPropertyChange('appliedBoxShadow', this.appliedBoxShadow);
this.borderRadius = 0;
this.borderWidth = 0;
this.notifyPropertyChange('borderRadius', this.borderRadius);
this.notifyPropertyChange('borderWidth', this.borderWidth);
this.background = null;
this.notifyPropertyChange('background', this.background);
this._selectedBackgroundType = null;
this.notifyPropertyChange('selectedBackgroundType', null);
this._selectedBorderType = null;
this.notifyPropertyChange('selectedBorderType', null);
this._selectedComponentType = null;
this.notifyPropertyChange('selectedComponentType', null);
this._selectedAnimation = null;
}
textChange(args): void { textChange(args): void {
this._boxShadow = args.object.text; this._boxShadow = args.object.text;
} }

46
apps/toolbox/src/pages/box-shadow.xml
View File

@ -9,7 +9,7 @@
<!-- layouts --> <!-- layouts -->
<ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}"> <ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
<StackLayout padding="20"> <StackLayout padding="20">
<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}"> <StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="StackLayout" /> <Label text="StackLayout" />
</StackLayout> </StackLayout>
@ -28,7 +28,6 @@
<FlexboxLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}"> <FlexboxLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
<Label text="FlexboxLayout" /> <Label text="FlexboxLayout" />
</FlexboxLayout> </FlexboxLayout>
</StackLayout> </StackLayout>
</ScrollView> </ScrollView>
@ -46,47 +45,46 @@
</GridLayout> </GridLayout>
<!-- images --> <!-- images -->
<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}"> <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
<ContentView width="100" height="100" horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" tap="{{ toggleAnimation }}"> <ContentView width="100" height="100" horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" tap="{{ toggleAnimation }}">
<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png" /> <Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png" />
</ContentView> </ContentView>
</GridLayout>
</GridLayout>
</StackLayout> </StackLayout>
<GridLayout row="1" rows="auto" columns="auto, *, auto" class="box-shadow-prop-controls"> <GridLayout row="1" rows="auto,auto" columns="auto,*,auto" class="box-shadow-prop-controls">
<Label col="0" verticalAlignment="center" text="box-shadow:" /> <Label col="0" verticalAlignment="center" text="box-shadow:" />
<TextField col="1" placeholder="box-shadow" text="{{ boxShadow }}" textChange="{{ textChange }}"> <TextField col="1" colSpan="2" placeholder="box-shadow" text="{{ boxShadow }}" textChange="{{ textChange }}">
</TextField> </TextField>
<Button col="2" text="APPLY" class="btn-apply" tap="{{ applyBoxShadow }}" /> <Button row="1" col="0" text="RESET" fontSize="11" tap="{{ resetAll }}" />
<Button row="1" col="2" text="APPLY" class="btn-apply" tap="{{ applyBoxShadow }}" />
</GridLayout> </GridLayout>
<ScrollView row="2"> <ScrollView row="2">
<StackLayout padding="10" class="controls"> <StackLayout padding="10" class="controls">
<Label text="Components" /> <Label text="Components" />
<FlexboxLayout flexDirection="row" flexWrap="wrap"> <FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}" /> <Button text="Layouts" componentType="layouts" class="{{ selectedComponentType == 'layouts' ? 'selected' : 'unselected' }}" tap="{{ selectComponentType }}" />
<Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}" /> <Button text="Labels" componentType="labels" class="{{ selectedComponentType == 'labels' ? 'selected' : 'unselected' }}" tap="{{ selectComponentType }}" />
<Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}" /> <Button text="Buttons" componentType="buttons" class="{{ selectedComponentType == 'buttons' ? 'selected' : 'unselected' }}" tap="{{ selectComponentType }}" />
<Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}" /> <Button text="Images" componentType="images" class="{{ selectedComponentType == 'images' ? 'selected' : 'unselected' }}" tap="{{ selectComponentType }}" />
</FlexboxLayout> </FlexboxLayout>
<Label text="Background" /> <Label text="Background" />
<FlexboxLayout flexDirection="row" flexWrap="wrap"> <FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}" /> <Button text="Solid" backgroundType="solid" class="{{ selectedBackgroundType == 'solid' ? 'selected' : 'unselected' }}" tap="{{ selectBackgroundType }}" />
<Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}" /> <Button text="Transparent" backgroundType="transparent" class="{{ selectedBackgroundType == 'transparent' ? 'selected' : 'unselected' }}" tap="{{ selectBackgroundType }}" />
<Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}" /> <Button text="Gradient" backgroundType="gradient" class="{{ selectedBackgroundType == 'gradient' ? 'selected' : 'unselected' }}" tap="{{ selectBackgroundType }}" />
</FlexboxLayout> </FlexboxLayout>
<Label text="Borders" /> <Label text="Borders" />
<FlexboxLayout flexDirection="row" flexWrap="wrap"> <FlexboxLayout flexDirection="row" flexWrap="wrap">
<Button text="Solid" borderType="solid" tap="{{ selectBorderType }}" /> <Button text="Solid" borderType="solid" class="{{ selectedBorderType == 'solid' ? 'selected' : 'unselected' }}" tap="{{ selectBorderType }}" />
<Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}" /> <Button text="Rounded" borderType="rounded" class="{{ selectedBorderType == 'rounded' ? 'selected' : 'unselected' }}" tap="{{ selectBorderType }}" />
<Button text="Partial" borderType="partial" tap="{{ selectBorderType }}" /> <Button text="Partial" borderType="partial" class="{{ selectedBorderType == 'partial' ? 'selected' : 'unselected' }}" tap="{{ selectBorderType }}" />
<Button text="None" borderType="none" tap="{{ selectBorderType }}" /> <Button text="None" borderType="none" class="{{ selectedBorderType == 'none' ? 'selected' : 'unselected' }}" tap="{{ selectBorderType }}" />
</FlexboxLayout> </FlexboxLayout>
<Label text="Animations" /> <Label text="Animations" />

200
packages/core/ui/styling/background.ios.ts
View File

@ -33,13 +33,16 @@ export namespace ios {
const background = view.style.backgroundInternal; const background = view.style.backgroundInternal;
const nativeView = <NativeScriptUIView>view.nativeViewProtected; const nativeView = <NativeScriptUIView>view.nativeViewProtected;
console.log('here');
if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW) { if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW) {
console.log('here 2');
// clear box shadow if it has been removed! // clear box shadow if it has been removed!
view.setProperty('clipToBounds', true); view.setProperty('clipToBounds', true);
clearBoxShadow(nativeView); clearBoxShadow(nativeView);
} }
if (nativeView.hasNonUniformBorder) { if (nativeView.hasNonUniformBorder) {
console.log('here 3');
unsubscribeFromScrollNotifications(view); unsubscribeFromScrollNotifications(view);
clearNonUniformBorders(nativeView); clearNonUniformBorders(nativeView);
} }
@ -52,23 +55,41 @@ export namespace ios {
const hasNonUniformBorderWidths = background.hasBorderWidth() && !background.hasUniformBorder(); const hasNonUniformBorderWidths = background.hasBorderWidth() && !background.hasUniformBorder();
const hasNonUniformBorderRadiuses = background.hasBorderRadius() && !background.hasUniformBorderRadius(); const hasNonUniformBorderRadiuses = background.hasBorderRadius() && !background.hasUniformBorderRadius();
if (background.hasUniformBorderColor() && (hasNonUniformBorderWidths || hasNonUniformBorderRadiuses)) { if (background.hasUniformBorderColor() && (hasNonUniformBorderWidths || hasNonUniformBorderRadiuses)) {
drawUniformColorNonUniformBorders(nativeView, background); console.log('here 4');
if (background.hasBoxShadow()) {
console.log('hasboxshadow 1');
drawBoxShadow(nativeView, view, background.getBoxShadow(), background);
} else {
drawUniformColorNonUniformBorders(nativeView, background);
}
subscribeForScrollNotifications(view); subscribeForScrollNotifications(view);
} else if (background.hasUniformBorder()) { } else if (background.hasUniformBorder()) {
const layer = nativeView.layer; console.log('here 5');
const borderColor = background.getUniformBorderColor(); if (background.hasBoxShadow()) {
layer.borderColor = !borderColor ? undefined : borderColor.ios.CGColor; drawBoxShadow(nativeView, view, background.getBoxShadow(), background);
layer.borderWidth = layout.toDeviceIndependentPixels(background.getUniformBorderWidth()); } else {
const renderSize = view.getActualSize() || { width: 0, height: 0 }; const layer = nativeView.layer;
layer.cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), layout.toDeviceIndependentPixels(background.getUniformBorderRadius())); const borderColor = background.getUniformBorderColor();
layer.borderColor = !borderColor ? undefined : borderColor.ios.CGColor;
layer.borderWidth = layout.toDeviceIndependentPixels(background.getUniformBorderWidth());
const renderSize = view.getActualSize() || { width: 0, height: 0 };
layer.cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), layout.toDeviceIndependentPixels(background.getUniformBorderRadius()));
}
} else { } else {
drawNoRadiusNonUniformBorders(nativeView, background); if (background.hasBoxShadow()) {
console.log('here 6');
drawBoxShadow(nativeView, view, background.getBoxShadow(), background);
} else {
console.log('here 7');
drawNoRadiusNonUniformBorders(nativeView, background);
}
subscribeForScrollNotifications(view); subscribeForScrollNotifications(view);
} }
// Clip-path should be called after borders are applied. // Clip-path should be called after borders are applied.
// It will eventually move them to different layer if uniform. // It will eventually move them to different layer if uniform.
if (background.clipPath) { if (background.clipPath) {
console.log('here 8');
drawClipPath(nativeView, background); drawClipPath(nativeView, background);
} }
@ -79,10 +100,6 @@ export namespace ios {
setUIColorFromImage(view, nativeView, callback, flip); setUIColorFromImage(view, nativeView, callback, flip);
} }
if (background.hasBoxShadow()) {
drawBoxShadow(nativeView, view, background.getBoxShadow(), background);
}
// reset clear flags // reset clear flags
background.clearFlags = BackgroundClearFlags.NONE; background.clearFlags = BackgroundClearFlags.NONE;
} }
@ -158,6 +175,12 @@ function clearNonUniformBorders(nativeView: NativeScriptUIView): void {
if (nativeView.leftBorderLayer) { if (nativeView.leftBorderLayer) {
nativeView.leftBorderLayer.removeFromSuperlayer(); nativeView.leftBorderLayer.removeFromSuperlayer();
} }
// const layer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow');
// if (layer) {
// layer.removeFromSuperlayer();
// }
clearBoxShadow(nativeView);
} }
const pattern = /url\(('|")(.*?)\1\)/; const pattern = /url\(('|")(.*?)\1\)/;
@ -710,42 +733,120 @@ function drawNoRadiusNonUniformBorders(nativeView: NativeScriptUIView, backgroun
// TODO: use sublayer if its applied to a layout // TODO: use sublayer if its applied to a layout
function drawBoxShadow(nativeView: NativeScriptUIView, view: View, boxShadow: CSSShadow, background: BackgroundDefinition, useSubLayer: boolean = false) { function drawBoxShadow(nativeView: NativeScriptUIView, view: View, boxShadow: CSSShadow, background: BackgroundDefinition, useSubLayer: boolean = false) {
const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow'); console.log('drawBoxShadow!');
// const drawLayer = CALayer.layer();
// nativeView.layer.addSublayer(drawLayer);
let layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow');
layer.masksToBounds = false; // // this should match the view's border radius
nativeView.clipsToBounds = false; console.log('background.getUniformBorderRadius():', background.getUniformBorderRadius());
let cornerRadius = layout.toDeviceIndependentPixels(background.getUniformBorderRadius());
// this is required (if not, shadow will get cutoff at parent's dimensions) if (isNaN(cornerRadius)) {
// nativeView.clipsToBounds doesn't work // ensure a valid value
view.setProperty('clipToBounds', false); cornerRadius = 0;
}
console.log('cornerRadius:', cornerRadius);
// // apply spreadRadius by expanding shadow layer bounds
// // prettier-ignore
// const bounds = CGRectInset(nativeView.bounds,
// -Length.toDevicePixels(boxShadow.spreadRadius, 0.0),
// -Length.toDevicePixels(boxShadow.spreadRadius, 0.0)
// );
// // This has the nice glow with box shadow of 0,0
// layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(bounds, cornerRadius).CGPath;
let corners: UIRectCorner;
// const borderTopLeftRadius = Length.toDevicePixels(view.borderTopLeftRadius, 0.0);
// const borderTopRightRadius = Length.toDevicePixels(view.borderTopRightRadius, 0.0);
// const borderBottomLeftRadius = Length.toDevicePixels(view.borderBottomLeftRadius, 0.0);
// const borderBottomRightRadius = Length.toDevicePixels(view.borderBottomRightRadius, 0.0);
const borderTopLeftRadius = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.borderTopLeftRadius, 0.0));
const borderTopRightRadius = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.borderTopRightRadius, 0.0));
const borderBottomLeftRadius = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.borderBottomLeftRadius, 0.0));
const borderBottomRightRadius = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.borderBottomRightRadius, 0.0));
console.log('borderTopLeftRadius:', borderTopLeftRadius);
console.log('borderTopRightRadius:', borderTopRightRadius);
console.log('borderBottomLeftRadius:', borderBottomLeftRadius);
console.log('borderBottomRightRadius:', borderBottomRightRadius);
if (borderTopLeftRadius) {
corners = UIRectCorner.TopLeft;
console.log('borderTopLeftRadius corners:', corners);
}
if (borderTopRightRadius) {
corners = corners | UIRectCorner.TopRight;
console.log('borderTopRightRadius corners:', corners);
}
if (borderBottomLeftRadius) {
corners = corners | UIRectCorner.BottomLeft;
console.log('borderBottomLeftRadius corners:', corners);
}
if (borderBottomRightRadius) {
corners = corners | UIRectCorner.BottomRight;
console.log('borderBottomRightRadius corners:', corners);
}
if (!cornerRadius) {
// consider max value from non-uniform radius
// cornerRadius = Math.max(borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius);
const renderSize = view.getActualSize() || { width: 0, height: 0 };
cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), Math.max(borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius));
}
console.log('cornerRadius after looking at sides:', cornerRadius);
let shadowLayer;
let addLayer = false;
if (layer) {
shadowLayer = layer;
} else {
shadowLayer = CAShapeLayer.layer();
shadowLayer.name = 'ns-box-shadow';
addLayer = true;
layer = nativeView.layer;
}
// let size = CGSizeMake(cornerRadius ? cornerRadius/2 : 0, cornerRadius ? cornerRadius/2 : 0);
let size = CGSizeMake(cornerRadius, cornerRadius);
console.log('size:', size.width, size.height);
const spreadRadius = layout.toDeviceIndependentPixels(Length.toDevicePixels(boxShadow.spreadRadius, 0.0));
// const cgPath = UIBezierPath.bezierPathWithRoundedRectByRoundingCornersCornerRadii(CGRectInset(nativeView.bounds, -Length.toDevicePixels(boxShadow.spreadRadius, 0.0), -Length.toDevicePixels(boxShadow.spreadRadius, 0.0)), corners, size).CGPath;
const cgPath = UIBezierPath.bezierPathWithRoundedRectByRoundingCornersCornerRadii(CGRectInset(nativeView.bounds, -spreadRadius, -spreadRadius), corners, size).CGPath;
// let cgPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: size).cgPath //1
shadowLayer.path = cgPath;
console.log('background.color:', background.color);
console.log('background.color?.a:', background.color?.a);
if (!background.color?.a) { if (!background.color?.a) {
// add white background if view has a transparent background // add white background if view has a transparent background
layer.backgroundColor = UIColor.whiteColor.CGColor; shadowLayer.fillColor = UIColor.whiteColor.CGColor;
// nativeView.backgroundColor = background.color ? background.color.ios : undefined;
} else {
shadowLayer.fillColor = background.color ? background.color.ios : undefined;
// nativeView.backgroundColor = background.color ? background.color.ios : undefined;
} }
// shadow opacity is handled on the shadow's color instance // const borderColor = background.getUniformBorderColor();
layer.shadowOpacity = boxShadow.color?.a ? boxShadow.color?.a / 255 : 1; // shadowLayer.borderColor = !borderColor ? undefined : borderColor.ios.CGColor;
layer.shadowRadius = Length.toDevicePixels(boxShadow.blurRadius, 0.0); // shadowLayer.borderWidth = layout.toDeviceIndependentPixels(background.getUniformBorderWidth());
layer.shadowColor = boxShadow.color.ios.CGColor; shadowLayer.shadowColor = boxShadow.color.ios.CGColor;
shadowLayer.shadowPath = cgPath;
// prettier-ignore shadowLayer.shadowOffset = CGSizeMake(Length.toDevicePixels(boxShadow.offsetX, 0.0), Length.toDevicePixels(boxShadow.offsetY, 0.0));
layer.shadowOffset = CGSizeMake( shadowLayer.shadowOpacity = boxShadow.color?.a ? boxShadow.color?.a / 255 : 1;
Length.toDevicePixels(boxShadow.offsetX, 0.0), shadowLayer.shadowRadius = Length.toDevicePixels(boxShadow.blurRadius, 0.0);
Length.toDevicePixels(boxShadow.offsetY, 0.0) if (addLayer) {
); console.log('layer.addSublayer(shadowLayer)');
// drawLayer.addSublayer(shadowLayer);
// this should match the view's border radius layer.addSublayer(shadowLayer);
const cornerRadius = Length.toDevicePixels(<CoreTypes.LengthType>view.style.borderRadius, 0.0); // layer.insertSublayerAtIndex(shadowLayer, -1);
} else {
// apply spreadRadius by expanding shadow layer bounds nativeView.setNeedsDisplay();
// prettier-ignore }
const bounds = CGRectInset(nativeView.bounds, layer.masksToBounds = false;
-Length.toDevicePixels(boxShadow.spreadRadius, 0.0), nativeView.clipsToBounds = false;
-Length.toDevicePixels(boxShadow.spreadRadius, 0.0) nativeView.hasNonUniformBorder = true;
);
// This has the nice glow with box shadow of 0,0
layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(bounds, cornerRadius).CGPath;
} }
function clearBoxShadow(nativeView: NativeScriptUIView) { function clearBoxShadow(nativeView: NativeScriptUIView) {
@ -754,12 +855,14 @@ function clearBoxShadow(nativeView: NativeScriptUIView) {
if (!layer) { if (!layer) {
return; return;
} }
layer.masksToBounds = true; layer.removeFromSuperlayer();
layer.shadowOffset = CGSizeMake(0, 0); // layer.masksToBounds = true;
layer.shadowColor = UIColor.clearColor.CGColor; // layer.shadowPath = null;
layer.cornerRadius = 0.0; // layer.shadowOffset = CGSizeMake(0, 0);
layer.shadowRadius = 0.0; // layer.shadowColor = UIColor.clearColor.CGColor;
layer.shadowOpacity = 0.0; // layer.cornerRadius = 0.0;
// layer.shadowRadius = 0.0;
// layer.shadowOpacity = 0.0;
} }
function drawClipPath(nativeView: UIView, background: BackgroundDefinition) { function drawClipPath(nativeView: UIView, background: BackgroundDefinition) {
@ -826,6 +929,7 @@ function drawClipPath(nativeView: UIView, background: BackgroundDefinition) {
layer.borderColor = undefined; layer.borderColor = undefined;
layer.borderWidth = 0; layer.borderWidth = 0;
console.log('drawClipPath layer.addSublayer(borderLayer)');
layer.addSublayer(borderLayer); layer.addSublayer(borderLayer);
} }
} }

31
packages/core/utils/native-helper.ios.ts
View File

@ -121,7 +121,7 @@ export namespace iOSNativeHelper {
} }
export function getShadowLayer(nativeView: UIView, name: string = 'ns-shadow-layer', create: boolean = true): CALayer { export function getShadowLayer(nativeView: UIView, name: string = 'ns-shadow-layer', create: boolean = true): CALayer {
return nativeView.layer; // return nativeView.layer;
console.log(`--- ${create ? 'CREATE' : 'READ'}`); console.log(`--- ${create ? 'CREATE' : 'READ'}`);
@ -179,27 +179,28 @@ export namespace iOSNativeHelper {
if (!create) { if (!create) {
return null; return null;
} }
return null;
console.log(`- adding a new layer for - ${name}`); // console.log(`- adding a new layer for - ${name}`);
const viewLayer = nativeView.layer; // const viewLayer = nativeView.layer;
const newLayer = CALayer.layer(); // const newLayer = CALayer.layer();
newLayer.name = name; // newLayer.name = name;
newLayer.zPosition = 0.0; // newLayer.zPosition = 0.0;
// nativeView.layer.insertSublayerBelow(newLayer, nativeView.layer) // // nativeView.layer.insertSublayerBelow(newLayer, nativeView.layer)
// newLayer.insertSublayerAtIndex(nativeView.layer, 0) // // newLayer.insertSublayerAtIndex(nativeView.layer, 0)
// nativeView.layer.zPosition = 1.0; // // nativeView.layer.zPosition = 1.0;
// nativeView.layer.addSublayer(newLayer); // // nativeView.layer.addSublayer(newLayer);
// nativeView.layer = CALayer.layer() // // nativeView.layer = CALayer.layer()
nativeView.layer.insertSublayerAtIndex(newLayer, 0); // nativeView.layer.insertSublayerAtIndex(newLayer, 0);
// nativeView.layer.insertSublayerAtIndex(viewLayer, 1) // // nativeView.layer.insertSublayerAtIndex(viewLayer, 1)
// nativeView.layer.replaceSublayerWith(newLayer, nativeView.layer); // // nativeView.layer.replaceSublayerWith(newLayer, nativeView.layer);
return newLayer; // return newLayer;
} }
export function createUIDocumentInteractionControllerDelegate(): NSObject { export function createUIDocumentInteractionControllerDelegate(): NSObject {