mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
chore: cleanup
This commit is contained in:
Igor Randjelovic
committed by
Nathan Walker
Nathan Walker
parent
3402710b56
commit
ff450755be
@@ -11,13 +11,17 @@ export class BoxShadowModel extends Observable {
|
||||
private _selectedBackgroundType: string;
|
||||
private _selectedBorderType: string;
|
||||
private _selectedAnimation: string;
|
||||
private _boxShadow: string;
|
||||
private _boxShadow: string = '5 5 1 1 rgba(255, 0, 0, .9)';
|
||||
|
||||
background: string;
|
||||
borderWidth: number;
|
||||
borderRadius: number;
|
||||
appliedBoxShadow: string;
|
||||
|
||||
get boxShadow(): string {
|
||||
return this._boxShadow;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
@@ -9,14 +9,14 @@
|
||||
<!-- layouts -->
|
||||
<ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
|
||||
<StackLayout>
|
||||
<StackLayout
|
||||
<StackLayout
|
||||
width="300"
|
||||
height="100"
|
||||
class="demo-component"
|
||||
boxShadow="{{ appliedBoxShadow }}"
|
||||
borderWidth="{{ borderWidth }}"
|
||||
borderRadius="{{ borderRadius }}"
|
||||
backgroundColor="{{ background }}"
|
||||
background="{{ background }}"
|
||||
tap="{{ toggleAnimation }}"
|
||||
>
|
||||
<Label text="StackLayout"></Label>
|
||||
@@ -29,7 +29,7 @@
|
||||
boxShadow="{{ appliedBoxShadow }}"
|
||||
borderWidth="{{ borderWidth }}"
|
||||
borderRadius="{{ borderRadius }}"
|
||||
backgroundColor="{{ background }}"
|
||||
background="{{ background }}"
|
||||
tap="{{ toggleAnimation }}"
|
||||
>
|
||||
<Label text="GridLayout"></Label>
|
||||
@@ -42,7 +42,7 @@
|
||||
boxShadow="{{ appliedBoxShadow }}"
|
||||
borderWidth="{{ borderWidth }}"
|
||||
borderRadius="{{ borderRadius }}"
|
||||
backgroundColor="{{ background }}"
|
||||
background="{{ background }}"
|
||||
tap="{{ toggleAnimation }}"
|
||||
>
|
||||
<Label text="AbsoluteLayout"></Label>
|
||||
@@ -55,7 +55,7 @@
|
||||
boxShadow="{{ appliedBoxShadow }}"
|
||||
borderWidth="{{ borderWidth }}"
|
||||
borderRadius="{{ borderRadius }}"
|
||||
backgroundColor="{{ background }}"
|
||||
background="{{ background }}"
|
||||
tap="{{ toggleAnimation }}"
|
||||
>
|
||||
<Label text="DockLayout"></Label>
|
||||
@@ -68,17 +68,33 @@
|
||||
boxShadow="{{ appliedBoxShadow }}"
|
||||
borderWidth="{{ borderWidth }}"
|
||||
borderRadius="{{ borderRadius }}"
|
||||
backgroundColor="{{ background }}"
|
||||
background="{{ background }}"
|
||||
tap="{{ toggleAnimation }}"
|
||||
>
|
||||
<Label text="FlexboxLayout"></Label>
|
||||
</FlexboxLayout>
|
||||
|
||||
<GridLayout
|
||||
width="300"
|
||||
height="100"
|
||||
padding="4"
|
||||
boxShadow="{{ appliedBoxShadow }}"
|
||||
tap="{{ toggleAnimation }}"
|
||||
>
|
||||
<StackLayout
|
||||
borderWidth="4"
|
||||
borderRadius="20"
|
||||
backgroundColor="white"
|
||||
>
|
||||
<Label text="BorderRadius + BoxShadow on parent container"></Label>
|
||||
</StackLayout>
|
||||
</GridLayout>
|
||||
|
||||
</StackLayout>
|
||||
</ScrollView>
|
||||
|
||||
<!-- labels -->
|
||||
<GridLayout
|
||||
<GridLayout
|
||||
rows="*"
|
||||
height="100%"
|
||||
visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">
|
||||
@@ -90,32 +106,53 @@
|
||||
boxShadow="{{ appliedBoxShadow }}"
|
||||
borderWidth="{{ borderWidth }}"
|
||||
borderRadius="{{ borderRadius }}"
|
||||
backgroundColor="{{ background }}"
|
||||
background="{{ background }}"
|
||||
tap="{{ toggleAnimation }}"
|
||||
text="Label"></Label>
|
||||
|
||||
</GridLayout>
|
||||
|
||||
<!-- buttons -->
|
||||
<GridLayout
|
||||
<GridLayout
|
||||
rows="*"
|
||||
height="100%"
|
||||
visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
|
||||
|
||||
<Button
|
||||
<Button
|
||||
horizontalAlignment="center"
|
||||
verticalAlignment="center"
|
||||
class="demo-component"
|
||||
boxShadow="{{ appliedBoxShadow }}"
|
||||
borderWidth="{{ borderWidth }}"
|
||||
borderRadius="{{ borderRadius }}"
|
||||
backgroundColor="{{ background }}"
|
||||
background="{{ background }}"
|
||||
tap="{{ toggleAnimation }}"
|
||||
text="button"
|
||||
></Button>
|
||||
|
||||
</GridLayout>
|
||||
|
||||
<!-- images -->
|
||||
<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 }}">
|
||||
<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png"></Image>
|
||||
</ContentView>
|
||||
|
||||
|
||||
</GridLayout>
|
||||
|
||||
</StackLayout>
|
||||
|
||||
<GridLayout
|
||||
@@ -130,6 +167,7 @@
|
||||
<TextField
|
||||
col="1"
|
||||
placeholder="box-shadow"
|
||||
text="{{ boxShadow }}"
|
||||
textChange="{{ textChange }}"
|
||||
>
|
||||
</TextField>
|
||||
@@ -146,6 +184,7 @@
|
||||
<Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}"></Button>
|
||||
<Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}"></Button>
|
||||
<Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}"></Button>
|
||||
<Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}"></Button>
|
||||
</FlexboxLayout>
|
||||
|
||||
<Label text="Background"></Label>
|
||||
@@ -172,7 +211,7 @@
|
||||
<Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}"></Button>
|
||||
<Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}"></Button>
|
||||
</FlexboxLayout>
|
||||
|
||||
|
||||
</StackLayout>
|
||||
</ScrollView>
|
||||
</GridLayout>
|
||||
|
||||
@@ -760,7 +760,10 @@ function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: CSSShadow,
|
||||
|
||||
function clearBoxShadow(nativeView: NativeView) {
|
||||
nativeView.clipsToBounds = true;
|
||||
const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow');
|
||||
const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow', false);
|
||||
if (!layer) {
|
||||
return;
|
||||
}
|
||||
layer.masksToBounds = true;
|
||||
layer.shadowOffset = CGSizeMake(0, 0);
|
||||
layer.shadowColor = UIColor.clearColor.CGColor;
|
||||
|
||||
3
packages/core/utils/native-helper.d.ts
vendored
3
packages/core/utils/native-helper.d.ts
vendored
@@ -171,8 +171,9 @@ export namespace iOSNativeHelper {
|
||||
/**
|
||||
* @param nativeView UIView to find shadow layer with
|
||||
* @param name Name of the shadow layer if looking for specifically named layer
|
||||
* @param create should we create a new layer if not found
|
||||
*/
|
||||
export function getShadowLayer(nativeView: any /* UIView */, name?: string): any; /* CALayer */
|
||||
export function getShadowLayer(nativeView: any /* UIView */, name?: string, create?: boolean): any; /* CALayer */
|
||||
|
||||
/**
|
||||
* Create a UIDocumentInteractionControllerDelegate implementation for use with UIDocumentInteractionController
|
||||
|
||||
@@ -120,44 +120,86 @@ export namespace iOSNativeHelper {
|
||||
return transform;
|
||||
}
|
||||
|
||||
export function getShadowLayer(nativeView: UIView, name?: string): CALayer {
|
||||
let layer: CALayer;
|
||||
name = name || 'ns-shadow-layer';
|
||||
if (nativeView) {
|
||||
if (nativeView.layer) {
|
||||
if (nativeView.layer.name === name) {
|
||||
console.log('- found shadow layer - reusing.');
|
||||
return nativeView.layer;
|
||||
} else {
|
||||
if (nativeView.layer.sublayers && nativeView.layer.sublayers.count) {
|
||||
console.log('nativeView.layer.sublayers.count:', nativeView.layer.sublayers.count);
|
||||
for (let i = 0; i < nativeView.layer.sublayers.count; i++) {
|
||||
console.log(`layer ${i}:`, nativeView.layer.sublayers.objectAtIndex(i));
|
||||
console.log(`layer ${i} name:`, nativeView.layer.sublayers.objectAtIndex(i).name);
|
||||
if (nativeView.layer.sublayers.objectAtIndex(i).name === name) {
|
||||
return nativeView.layer.sublayers.objectAtIndex(i);
|
||||
}
|
||||
}
|
||||
if (nativeView instanceof UITextView) {
|
||||
layer = nativeView.layer.sublayers.objectAtIndex(1);
|
||||
} else {
|
||||
layer = nativeView.layer.sublayers.objectAtIndex(nativeView.layer.sublayers.count - 1);
|
||||
}
|
||||
} else {
|
||||
layer = nativeView.layer;
|
||||
}
|
||||
export function getShadowLayer(nativeView: UIView, name: string = 'ns-shadow-layer', create: boolean = true): CALayer {
|
||||
return nativeView.layer;
|
||||
|
||||
console.log(`--- ${create ? 'CREATE' : 'READ'}`);
|
||||
|
||||
/**
|
||||
* UIView
|
||||
* -> Shadow
|
||||
*
|
||||
*
|
||||
* UIView
|
||||
* -> UIView
|
||||
* -> Shadow
|
||||
*/
|
||||
|
||||
if (!nativeView) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!nativeView.layer) {
|
||||
// should never hit this?
|
||||
console.log('- no layer! -');
|
||||
return null;
|
||||
}
|
||||
|
||||
// if the nativeView's layer is the shadow layer?
|
||||
if (nativeView.layer.name === name) {
|
||||
console.log('- found shadow layer - reusing.');
|
||||
return nativeView.layer;
|
||||
}
|
||||
|
||||
console.log('>> layer :', nativeView.layer);
|
||||
if (nativeView.layer.sublayers?.count) {
|
||||
const count = nativeView.layer.sublayers.count;
|
||||
for (let i = 0; i < count; i++) {
|
||||
const subLayer = nativeView.layer.sublayers.objectAtIndex(i);
|
||||
|
||||
console.log(`>> subLayer ${i + 1}/${count} :`, subLayer);
|
||||
console.log(`>> subLayer ${i + 1}/${count} name :`, subLayer.name);
|
||||
|
||||
if (subLayer.name === name) {
|
||||
console.log('- found shadow sublayer - reusing.');
|
||||
return subLayer;
|
||||
}
|
||||
} else {
|
||||
// could this occur?
|
||||
console.log('no layer!');
|
||||
}
|
||||
// if (nativeView instanceof UITextView) {
|
||||
// return nativeView.layer.sublayers.objectAtIndex(1);
|
||||
// } else {
|
||||
// return nativeView.layer.sublayers.objectAtIndex(nativeView.layer.sublayers.count - 1);
|
||||
// }
|
||||
}
|
||||
console.log('layer.name:', layer.name);
|
||||
if (!layer.name) {
|
||||
// only explicitly name if the developer had not named it themselves and/or some other integration
|
||||
layer.name = name;
|
||||
// else {
|
||||
// layer = nativeView.layer;
|
||||
// }
|
||||
|
||||
// we're not interested in creating a new layer
|
||||
if (!create) {
|
||||
return null;
|
||||
}
|
||||
return layer;
|
||||
|
||||
console.log(`- adding a new layer for - ${name}`);
|
||||
|
||||
const viewLayer = nativeView.layer;
|
||||
const newLayer = CALayer.layer();
|
||||
|
||||
newLayer.name = name;
|
||||
newLayer.zPosition = 0.0;
|
||||
// nativeView.layer.insertSublayerBelow(newLayer, nativeView.layer)
|
||||
// newLayer.insertSublayerAtIndex(nativeView.layer, 0)
|
||||
// nativeView.layer.zPosition = 1.0;
|
||||
// nativeView.layer.addSublayer(newLayer);
|
||||
|
||||
// nativeView.layer = CALayer.layer()
|
||||
|
||||
nativeView.layer.insertSublayerAtIndex(newLayer, 0);
|
||||
// nativeView.layer.insertSublayerAtIndex(viewLayer, 1)
|
||||
|
||||
// nativeView.layer.replaceSublayerWith(newLayer, nativeView.layer);
|
||||
|
||||
return newLayer;
|
||||
}
|
||||
|
||||
export function createUIDocumentInteractionControllerDelegate(): NSObject {
|
||||
|
||||
Reference in New Issue
Block a user