├── .editorconfig ├── .github └── workflows │ └── build-and-deploy.yml ├── .gitignore ├── .gitmodules ├── Directory.Build.props ├── LICENSE.txt ├── README.md ├── Squircle.sln ├── Squircle.slnx ├── demo └── Squircle.Blazor.Demo │ ├── App.razor │ ├── Layout │ ├── MainLayout.razor │ └── MainLayout.razor.css │ ├── Pages │ └── Home.razor │ ├── Program.cs │ ├── Properties │ └── launchSettings.json │ ├── Squircle.Blazor.Demo.csproj │ ├── _Imports.razor │ └── wwwroot │ ├── css │ └── app.css │ ├── favicon.ico │ ├── icon-192.png │ └── index.html ├── logo.png ├── nuget.config ├── overlay.png ├── overview.png ├── src └── Squircle.Blazor │ ├── PathGenerator.cs │ ├── ResizeObserver.cs │ ├── Squircle.Blazor.csproj │ ├── SquircleElement.razor │ ├── SquircleElement.razor.cs │ └── _Imports.razor └── test └── Squircle.Test ├── Div.razor ├── Squircle.Test.csproj └── SquircleElementTest.cs /.editorconfig: -------------------------------------------------------------------------------- 1 | # Remove the line below if you want to inherit .editorconfig settings from higher directories 2 | root = true 3 | 4 | #### Core EditorConfig Options #### 5 | 6 | # Indentation and spacing 7 | [*] 8 | 9 | indent_size = 4 10 | indent_style = space 11 | lf_width = 4 12 | 13 | # New line preferences 14 | end_of_line = crlf 15 | insert_final_newline = false 16 | 17 | # C# files 18 | [*.cs] 19 | 20 | #### .NET Coding Conventions #### 21 | 22 | # Organize usings 23 | dotnet_separate_import_directive_groups = false 24 | dotnet_sort_system_directives_first = false 25 | file_header_template = unset 26 | 27 | # this. and Me. preferences 28 | dotnet_style_qualification_for_event = false 29 | dotnet_style_qualification_for_field = false 30 | dotnet_style_qualification_for_method = false 31 | dotnet_style_qualification_for_property = false 32 | 33 | # Language keywords vs BCL types preferences 34 | dotnet_style_predefined_type_for_locals_parameters_members = true 35 | dotnet_style_predefined_type_for_member_access = true 36 | 37 | # Parentheses preferences 38 | dotnet_style_parentheses_in_arithmetic_binary_operators = always_for_clarity 39 | dotnet_style_parentheses_in_other_binary_operators = always_for_clarity 40 | dotnet_style_parentheses_in_other_operators = never_if_unnecessary 41 | dotnet_style_parentheses_in_relational_binary_operators = always_for_clarity 42 | 43 | # Modifier preferences 44 | dotnet_style_require_accessibility_modifiers = for_non_interface_members 45 | 46 | # Expression-level preferences 47 | dotnet_style_coalesce_expression = true 48 | dotnet_style_collection_initializer = true 49 | dotnet_style_explicit_tuple_names = true 50 | dotnet_style_namespace_match_folder = true 51 | dotnet_style_null_propagation = true 52 | dotnet_style_object_initializer = true 53 | dotnet_style_operator_placement_when_wrapping = beginning_of_line 54 | dotnet_style_prefer_auto_properties = true 55 | dotnet_style_prefer_compound_assignment = true 56 | dotnet_style_prefer_conditional_expression_over_assignment = true 57 | dotnet_style_prefer_conditional_expression_over_return = true 58 | dotnet_style_prefer_foreach_explicit_cast_in_source = when_strongly_typed 59 | dotnet_style_prefer_inferred_anonymous_type_member_names = true 60 | dotnet_style_prefer_inferred_tuple_names = true 61 | dotnet_style_prefer_is_null_check_over_reference_equality_method = true 62 | dotnet_style_prefer_simplified_boolean_expressions = true 63 | dotnet_style_prefer_simplified_interpolation = true 64 | 65 | # Field preferences 66 | dotnet_style_readonly_field = true 67 | 68 | # Parameter preferences 69 | dotnet_code_quality_unused_parameters = all 70 | 71 | # Suppression preferences 72 | dotnet_remove_unnecessary_suppression_exclusions = none 73 | 74 | # New line preferences 75 | dotnet_style_allow_multiple_blank_lines_experimental = true 76 | dotnet_style_allow_statement_immediately_after_block_experimental = true 77 | 78 | #### C# Coding Conventions #### 79 | 80 | # var preferences 81 | csharp_style_var_elsewhere = true:warning 82 | csharp_style_var_for_built_in_types = true:warning 83 | csharp_style_var_when_type_is_apparent = true:warning 84 | 85 | # Expression-bodied members 86 | csharp_style_expression_bodied_accessors = true:silent 87 | csharp_style_expression_bodied_constructors = false:silent 88 | csharp_style_expression_bodied_indexers = true:silent 89 | csharp_style_expression_bodied_lambdas = true:silent 90 | csharp_style_expression_bodied_local_functions = false:silent 91 | csharp_style_expression_bodied_methods = false:silent 92 | csharp_style_expression_bodied_operators = false:silent 93 | csharp_style_expression_bodied_properties = true:silent 94 | 95 | # Pattern matching preferences 96 | csharp_style_pattern_matching_over_as_with_null_check = true:warning 97 | csharp_style_pattern_matching_over_is_with_cast_check = true:warning 98 | csharp_style_prefer_extended_property_pattern = true:warning 99 | csharp_style_prefer_not_pattern = true:warning 100 | csharp_style_prefer_pattern_matching = true:silent 101 | csharp_style_prefer_switch_expression = true:warning 102 | 103 | # Null-checking preferences 104 | csharp_style_conditional_delegate_call = true:warning 105 | csharp_style_prefer_parameter_null_checking = true 106 | 107 | # Modifier preferences 108 | csharp_prefer_static_local_function = true:warning 109 | csharp_preferred_modifier_order = public,private,protected,internal,static,extern,new,virtual,abstract,sealed,override,readonly,unsafe,volatile,async 110 | 111 | # Code-block preferences 112 | csharp_prefer_braces = true:silent 113 | csharp_prefer_simple_using_statement = true:warning 114 | csharp_style_namespace_declarations = file_scoped:warning 115 | csharp_style_prefer_method_group_conversion = true:silent 116 | csharp_style_prefer_top_level_statements = true:silent 117 | 118 | # Expression-level preferences 119 | csharp_prefer_simple_default_expression = true:warning 120 | csharp_style_deconstructed_variable_declaration = true:warning 121 | csharp_style_implicit_object_creation_when_type_is_apparent = true:warning 122 | csharp_style_inlined_variable_declaration = true:warning 123 | csharp_style_prefer_index_operator = true:warning 124 | csharp_style_prefer_local_over_anonymous_function = true:warning 125 | csharp_style_prefer_null_check_over_type_check = true:warning 126 | csharp_style_prefer_range_operator = true:warning 127 | csharp_style_prefer_tuple_swap = true:warning 128 | csharp_style_throw_expression = true:warning 129 | csharp_style_unused_value_assignment_preference = discard_variable:warning 130 | csharp_style_unused_value_expression_statement_preference = discard_variable:silent 131 | 132 | # 'using' directive preferences 133 | csharp_using_directive_placement = outside_namespace:silent 134 | 135 | # New line preferences 136 | csharp_style_allow_blank_line_after_colon_in_constructor_initializer_experimental = true:silent 137 | csharp_style_allow_blank_lines_between_consecutive_braces_experimental = true:silent 138 | csharp_style_allow_embedded_statements_on_same_line_experimental = true:silent 139 | 140 | #### C# Formatting Rules #### 141 | 142 | # New line preferences 143 | csharp_new_line_before_catch = true 144 | csharp_new_line_before_else = true 145 | csharp_new_line_before_finally = true 146 | csharp_new_line_before_members_in_anonymous_types = true 147 | csharp_new_line_before_members_in_object_initializers = true 148 | csharp_new_line_before_open_brace = none 149 | csharp_new_line_between_query_expression_clauses = true 150 | 151 | # Indentation preferences 152 | csharp_indent_block_contents = true 153 | csharp_indent_braces = false 154 | csharp_indent_case_contents = true 155 | csharp_indent_case_contents_when_block = true 156 | csharp_indent_labels = one_less_than_current 157 | csharp_indent_switch_labels = true 158 | 159 | # Space preferences 160 | csharp_space_after_cast = false 161 | csharp_space_after_colon_in_inheritance_clause = true 162 | csharp_space_after_comma = true 163 | csharp_space_after_dot = false 164 | csharp_space_after_keywords_in_control_flow_statements = true 165 | csharp_space_after_semicolon_in_for_statement = true 166 | csharp_space_around_binary_operators = before_and_after 167 | csharp_space_around_declaration_statements = false 168 | csharp_space_before_colon_in_inheritance_clause = true 169 | csharp_space_before_comma = false 170 | csharp_space_before_dot = false 171 | csharp_space_before_open_square_brackets = false 172 | csharp_space_before_semicolon_in_for_statement = false 173 | csharp_space_between_empty_square_brackets = false 174 | csharp_space_between_method_call_empty_parameter_list_parentheses = false 175 | csharp_space_between_method_call_name_and_opening_parenthesis = false 176 | csharp_space_between_method_call_parameter_list_parentheses = false 177 | csharp_space_between_method_declaration_empty_parameter_list_parentheses = false 178 | csharp_space_between_method_declaration_name_and_open_parenthesis = false 179 | csharp_space_between_method_declaration_parameter_list_parentheses = false 180 | csharp_space_between_parentheses = false 181 | csharp_space_between_square_brackets = false 182 | 183 | # Wrapping preferences 184 | csharp_preserve_single_line_blocks = true 185 | csharp_preserve_single_line_statements = true 186 | 187 | #### Naming styles #### 188 | 189 | # Naming rules 190 | 191 | dotnet_naming_rule.interface_should_be_begins_with_i.severity = warning 192 | dotnet_naming_rule.interface_should_be_begins_with_i.symbols = interface 193 | dotnet_naming_rule.interface_should_be_begins_with_i.style = begins_with_i 194 | 195 | dotnet_naming_rule.types_should_be_pascal_case.severity = warning 196 | dotnet_naming_rule.types_should_be_pascal_case.symbols = types 197 | dotnet_naming_rule.types_should_be_pascal_case.style = pascal_case 198 | 199 | dotnet_naming_rule.non_field_members_should_be_pascal_case.severity = warning 200 | dotnet_naming_rule.non_field_members_should_be_pascal_case.symbols = non_field_members 201 | dotnet_naming_rule.non_field_members_should_be_pascal_case.style = pascal_case 202 | 203 | dotnet_naming_rule.private_fields_underscored.severity = warning 204 | dotnet_naming_rule.private_fields_underscored.symbols = private_fields 205 | dotnet_naming_rule.private_fields_underscored.style = underscored 206 | 207 | # Symbol specifications 208 | dotnet_naming_symbols.interface.applicable_kinds = interface 209 | dotnet_naming_symbols.interface.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected 210 | dotnet_naming_symbols.interface.required_modifiers = 211 | 212 | dotnet_naming_symbols.types.applicable_kinds = class, struct, interface, enum 213 | dotnet_naming_symbols.types.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected 214 | dotnet_naming_symbols.types.required_modifiers = 215 | 216 | dotnet_naming_symbols.non_field_members.applicable_kinds = property, event, method 217 | dotnet_naming_symbols.non_field_members.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected 218 | dotnet_naming_symbols.non_field_members.required_modifiers = 219 | 220 | 221 | dotnet_naming_symbols.private_fields.applicable_kinds = field 222 | dotnet_naming_symbols.private_fields.applicable_accessibilities = private 223 | dotnet_naming_symbols.private_fields.required_modifiers = 224 | 225 | # Naming styles 226 | dotnet_naming_style.pascal_case.required_prefix = 227 | dotnet_naming_style.pascal_case.required_suffix = 228 | dotnet_naming_style.pascal_case.word_separator = 229 | dotnet_naming_style.pascal_case.capitalization = pascal_case 230 | 231 | dotnet_naming_style.begins_with_i.required_prefix = I 232 | dotnet_naming_style.begins_with_i.required_suffix = 233 | dotnet_naming_style.begins_with_i.word_separator = 234 | dotnet_naming_style.begins_with_i.capitalization = pascal_case 235 | 236 | dotnet_naming_style.underscored.capitalization = camel_case 237 | dotnet_naming_style.underscored.required_prefix = _ 238 | 239 | dotnet_style_operator_placement_when_wrapping = beginning_of_line 240 | lf_width = 4 241 | indent_size = 4 242 | end_of_line = lf 243 | dotnet_style_coalesce_expression = true:warning 244 | dotnet_style_null_propagation = true:warning 245 | dotnet_style_prefer_is_null_check_over_reference_equality_method = true:warning 246 | dotnet_style_prefer_auto_properties = true:silent 247 | dotnet_style_object_initializer = true:warning 248 | dotnet_style_collection_initializer = true:warning 249 | dotnet_style_prefer_simplified_boolean_expressions = true:warning 250 | dotnet_style_prefer_conditional_expression_over_assignment = true:silent 251 | dotnet_style_prefer_conditional_expression_over_return = true:silent 252 | dotnet_style_explicit_tuple_names = true:warning 253 | dotnet_style_prefer_inferred_tuple_names = true:warning 254 | dotnet_style_prefer_inferred_anonymous_type_member_names = true:warning 255 | dotnet_style_prefer_compound_assignment = true:warning 256 | dotnet_style_prefer_simplified_interpolation = true:warning 257 | dotnet_style_namespace_match_folder = true:warning 258 | csharp_style_prefer_utf8_string_literals = true:warning 259 | csharp_style_prefer_readonly_struct = true:warning 260 | csharp_style_allow_blank_line_after_token_in_conditional_expression_experimental = true:silent 261 | csharp_style_allow_blank_line_after_token_in_arrow_expression_clause_experimental = true:silent 262 | csharp_style_prefer_primary_constructors = true:warning 263 | csharp_style_prefer_readonly_struct_member = true:suggestion 264 | 265 | [*.{cs,vb}] 266 | dotnet_style_operator_placement_when_wrapping = beginning_of_line 267 | lf_width = 4 268 | indent_size = 4 269 | end_of_line = crlf 270 | dotnet_style_coalesce_expression = true:warning 271 | dotnet_style_null_propagation = true:warning 272 | dotnet_style_prefer_is_null_check_over_reference_equality_method = true:warning 273 | dotnet_style_prefer_auto_properties = true:silent 274 | dotnet_style_object_initializer = true:warning 275 | dotnet_style_collection_initializer = true:warning 276 | dotnet_style_prefer_simplified_boolean_expressions = true:warning 277 | dotnet_style_prefer_conditional_expression_over_assignment = true:silent 278 | dotnet_style_prefer_conditional_expression_over_return = true:silent 279 | dotnet_style_explicit_tuple_names = true:warning 280 | dotnet_style_prefer_inferred_tuple_names = true:warning 281 | dotnet_style_prefer_inferred_anonymous_type_member_names = true:warning 282 | dotnet_style_prefer_compound_assignment = true:warning 283 | dotnet_style_prefer_simplified_interpolation = true:warning 284 | tab_width = 4 285 | dotnet_style_namespace_match_folder = true:warning 286 | dotnet_style_readonly_field = true:warning 287 | dotnet_style_predefined_type_for_locals_parameters_members = true:silent 288 | dotnet_style_predefined_type_for_member_access = true:silent 289 | dotnet_style_require_accessibility_modifiers = for_non_interface_members:silent 290 | dotnet_style_allow_multiple_blank_lines_experimental = true:silent 291 | dotnet_style_allow_statement_immediately_after_block_experimental = true:silent 292 | dotnet_code_quality_unused_parameters = all:warning 293 | dotnet_style_parentheses_in_other_binary_operators = always_for_clarity:silent 294 | dotnet_style_parentheses_in_arithmetic_binary_operators = always_for_clarity:silent 295 | dotnet_style_parentheses_in_other_operators = never_if_unnecessary:silent 296 | dotnet_style_parentheses_in_relational_binary_operators = always_for_clarity:silent 297 | dotnet_style_qualification_for_field = false:silent 298 | dotnet_style_qualification_for_property = false:silent 299 | dotnet_style_qualification_for_method = false:silent 300 | dotnet_style_qualification_for_event = false:silent 301 | dotnet_style_prefer_collection_expression = true:warning -------------------------------------------------------------------------------- /.github/workflows/build-and-deploy.yml: -------------------------------------------------------------------------------- 1 | name: "Publish BlazorApp" 2 | on: 3 | release: 4 | types: [released] 5 | push: 6 | branches: 7 | - main 8 | 9 | permissions: 10 | contents: read 11 | pages: write 12 | id-token: write 13 | 14 | jobs: 15 | build-and-deploy: 16 | runs-on: ubuntu-latest 17 | steps: 18 | # Checkout the code 19 | - uses: actions/checkout@v2 20 | 21 | # Install .NET Core SDK 22 | - name: Setup .NET Core 23 | uses: actions/setup-dotnet@v1 24 | with: 25 | dotnet-version: 8.x 26 | 27 | # Generate the website 28 | - name: Install wasm tool 29 | run: dotnet workload install wasm-tools 30 | 31 | - name: Build and Test 32 | run: | 33 | dotnet build 34 | dotnet test 35 | 36 | - name : Set Version variable from tag 37 | if: (github.event_name == 'release') 38 | run: | 39 | TAG=${{ github.event.release.tag_name }} 40 | echo "VERSION=${TAG#v}" >> $GITHUB_ENV 41 | 42 | - name: Pack NuGet Package 43 | if: (github.event_name == 'release') 44 | run: dotnet pack -c Release --include-symbols --include-source -p:PackageVersion=${VERSION} 45 | 46 | - name: Publish NuGet Package 47 | if: (github.event_name == 'release') 48 | run: dotnet nuget push 'src/**/*.nupkg' -k ${{ secrets.NUGET_API_KEY }} -s https://api.nuget.org/v3/index.json --skip-duplicate 49 | 50 | # Generate the website 51 | - name: Publish Sample Page 52 | if: (github.event_name == 'release') 53 | run: dotnet publish ./demo/Squircle.Blazor.Demo/Squircle.Blazor.Demo.csproj -c Release -p:GHPages=true 54 | 55 | - name: Setup Pages 56 | if: (github.event_name == 'release') 57 | uses: actions/configure-pages@v4 58 | 59 | - name: Upload artifact 60 | if: (github.event_name == 'release') 61 | uses: actions/upload-pages-artifact@v3 62 | with: 63 | path: './demo/Squircle.Blazor.Demo/bin/Release/net8.0/publish/wwwroot' 64 | 65 | # Deploy the site 66 | - name: Deploy to GitHub Pages 67 | if: (github.event_name == 'release') 68 | id: deployment 69 | uses: actions/deploy-pages@v4 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Ww][Ii][Nn]32/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Oo]ut/ 33 | [Ll]og/ 34 | [Ll]ogs/ 35 | 36 | # Visual Studio 2015/2017 cache/options directory 37 | .vs/ 38 | # Uncomment if you have tasks that create the project's static files in wwwroot 39 | #wwwroot/ 40 | 41 | # Visual Studio 2017 auto generated files 42 | Generated\ Files/ 43 | 44 | # MSTest test Results 45 | [Tt]est[Rr]esult*/ 46 | [Bb]uild[Ll]og.* 47 | 48 | # NUnit 49 | *.VisualState.xml 50 | TestResult.xml 51 | nunit-*.xml 52 | 53 | # Build Results of an ATL Project 54 | [Dd]ebugPS/ 55 | [Rr]eleasePS/ 56 | dlldata.c 57 | 58 | # Benchmark Results 59 | BenchmarkDotNet.Artifacts/ 60 | 61 | # .NET Core 62 | project.lock.json 63 | project.fragment.lock.json 64 | artifacts/ 65 | 66 | # ASP.NET Scaffolding 67 | ScaffoldingReadMe.txt 68 | 69 | # StyleCop 70 | StyleCopReport.xml 71 | 72 | # Files built by Visual Studio 73 | *_i.c 74 | *_p.c 75 | *_h.h 76 | *.ilk 77 | *.meta 78 | *.obj 79 | *.iobj 80 | *.pch 81 | *.pdb 82 | *.ipdb 83 | *.pgc 84 | *.pgd 85 | *.rsp 86 | *.sbr 87 | *.tlb 88 | *.tli 89 | *.tlh 90 | *.tmp 91 | *.tmp_proj 92 | *_wpftmp.csproj 93 | *.log 94 | *.vspscc 95 | *.vssscc 96 | .builds 97 | *.pidb 98 | *.svclog 99 | *.scc 100 | 101 | # Chutzpah Test files 102 | _Chutzpah* 103 | 104 | # Visual C++ cache files 105 | ipch/ 106 | *.aps 107 | *.ncb 108 | *.opendb 109 | *.opensdf 110 | *.sdf 111 | *.cachefile 112 | *.VC.db 113 | *.VC.VC.opendb 114 | 115 | # Visual Studio profiler 116 | *.psess 117 | *.vsp 118 | *.vspx 119 | *.sap 120 | 121 | # Visual Studio Trace Files 122 | *.e2e 123 | 124 | # TFS 2012 Local Workspace 125 | $tf/ 126 | 127 | # Guidance Automation Toolkit 128 | *.gpState 129 | 130 | # ReSharper is a .NET coding add-in 131 | _ReSharper*/ 132 | *.[Rr]e[Ss]harper 133 | *.DotSettings.user 134 | 135 | # TeamCity is a build add-in 136 | _TeamCity* 137 | 138 | # DotCover is a Code Coverage Tool 139 | *.dotCover 140 | 141 | # AxoCover is a Code Coverage Tool 142 | .axoCover/* 143 | !.axoCover/settings.json 144 | 145 | # Coverlet is a free, cross platform Code Coverage Tool 146 | coverage*.json 147 | coverage*.xml 148 | coverage*.info 149 | 150 | # Visual Studio code coverage results 151 | *.coverage 152 | *.coveragexml 153 | 154 | # NCrunch 155 | _NCrunch_* 156 | .*crunch*.local.xml 157 | nCrunchTemp_* 158 | 159 | # MightyMoose 160 | *.mm.* 161 | AutoTest.Net/ 162 | 163 | # Web workbench (sass) 164 | .sass-cache/ 165 | 166 | # Installshield output folder 167 | [Ee]xpress/ 168 | 169 | # DocProject is a documentation generator add-in 170 | DocProject/buildhelp/ 171 | DocProject/Help/*.HxT 172 | DocProject/Help/*.HxC 173 | DocProject/Help/*.hhc 174 | DocProject/Help/*.hhk 175 | DocProject/Help/*.hhp 176 | DocProject/Help/Html2 177 | DocProject/Help/html 178 | 179 | # Click-Once directory 180 | publish/ 181 | 182 | # Publish Web Output 183 | *.[Pp]ublish.xml 184 | *.azurePubxml 185 | # Note: Comment the next line if you want to checkin your web deploy settings, 186 | # but database connection strings (with potential passwords) will be unencrypted 187 | *.pubxml 188 | *.publishproj 189 | 190 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 191 | # checkin your Azure Web App publish settings, but sensitive information contained 192 | # in these scripts will be unencrypted 193 | PublishScripts/ 194 | 195 | # NuGet Packages 196 | *.nupkg 197 | # NuGet Symbol Packages 198 | *.snupkg 199 | # The packages folder can be ignored because of Package Restore 200 | **/[Pp]ackages/* 201 | # except build/, which is used as an MSBuild target. 202 | !**/[Pp]ackages/build/ 203 | # Uncomment if necessary however generally it will be regenerated when needed 204 | #!**/[Pp]ackages/repositories.config 205 | # NuGet v3's project.json files produces more ignorable files 206 | *.nuget.props 207 | *.nuget.targets 208 | 209 | # Microsoft Azure Build Output 210 | csx/ 211 | *.build.csdef 212 | 213 | # Microsoft Azure Emulator 214 | ecf/ 215 | rcf/ 216 | 217 | # Windows Store app package directories and files 218 | AppPackages/ 219 | BundleArtifacts/ 220 | Package.StoreAssociation.xml 221 | _pkginfo.txt 222 | *.appx 223 | *.appxbundle 224 | *.appxupload 225 | 226 | # Visual Studio cache files 227 | # files ending in .cache can be ignored 228 | *.[Cc]ache 229 | # but keep track of directories ending in .cache 230 | !?*.[Cc]ache/ 231 | 232 | # Others 233 | ClientBin/ 234 | ~$* 235 | *~ 236 | *.dbmdl 237 | *.dbproj.schemaview 238 | *.jfm 239 | *.pfx 240 | *.publishsettings 241 | orleans.codegen.cs 242 | 243 | # Including strong name files can present a security risk 244 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 245 | #*.snk 246 | 247 | # Since there are multiple workflows, uncomment next line to ignore bower_components 248 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 249 | #bower_components/ 250 | 251 | # RIA/Silverlight projects 252 | Generated_Code/ 253 | 254 | # Backup & report files from converting an old project file 255 | # to a newer Visual Studio version. Backup files are not needed, 256 | # because we have git ;-) 257 | _UpgradeReport_Files/ 258 | Backup*/ 259 | UpgradeLog*.XML 260 | UpgradeLog*.htm 261 | ServiceFabricBackup/ 262 | *.rptproj.bak 263 | 264 | # SQL Server files 265 | *.mdf 266 | *.ldf 267 | *.ndf 268 | 269 | # Business Intelligence projects 270 | *.rdl.data 271 | *.bim.layout 272 | *.bim_*.settings 273 | *.rptproj.rsuser 274 | *- [Bb]ackup.rdl 275 | *- [Bb]ackup ([0-9]).rdl 276 | *- [Bb]ackup ([0-9][0-9]).rdl 277 | 278 | # Microsoft Fakes 279 | FakesAssemblies/ 280 | 281 | # GhostDoc plugin setting file 282 | *.GhostDoc.xml 283 | 284 | # Node.js Tools for Visual Studio 285 | .ntvs_analysis.dat 286 | node_modules/ 287 | 288 | # Visual Studio 6 build log 289 | *.plg 290 | 291 | # Visual Studio 6 workspace options file 292 | *.opt 293 | 294 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 295 | *.vbw 296 | 297 | # Visual Studio LightSwitch build output 298 | **/*.HTMLClient/GeneratedArtifacts 299 | **/*.DesktopClient/GeneratedArtifacts 300 | **/*.DesktopClient/ModelManifest.xml 301 | **/*.Server/GeneratedArtifacts 302 | **/*.Server/ModelManifest.xml 303 | _Pvt_Extensions 304 | 305 | # Paket dependency manager 306 | .paket/paket.exe 307 | paket-files/ 308 | 309 | # FAKE - F# Make 310 | .fake/ 311 | 312 | # CodeRush personal settings 313 | .cr/personal 314 | 315 | # Python Tools for Visual Studio (PTVS) 316 | __pycache__/ 317 | *.pyc 318 | 319 | # Cake - Uncomment if you are using it 320 | # tools/** 321 | # !tools/packages.config 322 | 323 | # Tabs Studio 324 | *.tss 325 | 326 | # Telerik's JustMock configuration file 327 | *.jmconfig 328 | 329 | # BizTalk build output 330 | *.btp.cs 331 | *.btm.cs 332 | *.odx.cs 333 | *.xsd.cs 334 | 335 | # OpenCover UI analysis results 336 | OpenCover/ 337 | 338 | # Azure Stream Analytics local run output 339 | ASALocalRun/ 340 | 341 | # MSBuild Binary and Structured Log 342 | *.binlog 343 | 344 | # NVidia Nsight GPU debugger configuration file 345 | *.nvuser 346 | 347 | # MFractors (Xamarin productivity tool) working folder 348 | .mfractor/ 349 | 350 | # Local History for Visual Studio 351 | .localhistory/ 352 | 353 | # BeatPulse healthcheck temp database 354 | healthchecksdb 355 | 356 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 357 | MigrationBackup/ 358 | 359 | # Ionide (cross platform F# VS Code tools) working folder 360 | .ionide/ 361 | 362 | # Fody - auto-generated XML schema 363 | FodyWeavers.xsd 364 | 365 | # Development config file 366 | appsettings.Development.json 367 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "lib/yolu"] 2 | path = lib/yolu 3 | url = https://github.com/le-nn/yolu.git 4 | -------------------------------------------------------------------------------- /Directory.Build.props: -------------------------------------------------------------------------------- 1 | 2 | 3 | net8.0 4 | enable 5 | enable 6 | 7 | logo.png 8 | README.md 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | $(ProjectName) 20 | $(AssemblyName) 21 | $(AssemblyName) 22 | 23 | An amazing Figma squircle corner-smoothing for Blazor component like border radius in iOS 24 | le-nn 25 | MIT 26 | https://github.com/le-nn/blazor-squircle 27 | https://github.com/le-nn/blazor-squircle 28 | Copyright (c) 2024 le-nn 29 | git 30 | 31 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 le-nn 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Squircle Blazor Component 2 | 3 | An amazing Figma squircle corner-smoothing for Blazor component like border radius in iOS 4 | 5 | ![NuGet](https://img.shields.io/nuget/v/Squircle.Blazor.svg) 6 | ![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg) 7 | 8 | ![overview](https://raw.githubusercontent.com/le-nn/blazor-squircle/main/overview.png) 9 | 10 | ## What's Squircle 11 | 12 | Figma has a great feature called corner smoothing, allowing you to create rounded shapes with a seamless continuous curve (squircles). 13 | 14 | [https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing) 15 | 16 | A squircle is a shape intermediate between a square and a circle. There are at least two definitions of "squircle" in use, the most common of which is based on the superellipse. 17 | The word "squircle" is a portmanteau of the words "square" and "circle". 18 | Squircles have been applied in design and optics. 19 | 20 | 21 | [https://en.wikipedia.org/wiki/Squircle](https://en.wikipedia.org/wiki/Squircle) 22 | 23 | [https://medium.com/minimal-notes/rounded-corners-in-the-apple-ecosystem-1b3f45e18fcc](https://medium.com/minimal-notes/rounded-corners-in-the-apple-ecosystem-1b3f45e18fcc) 24 | 25 | ![overlay](https://raw.githubusercontent.com/le-nn/blazor-squircle/main/overlay.png) 26 | 27 | ## DEMO 28 | 29 | https://le-nn.github.io/blazor-squircle/ 30 | 31 | 32 | ## Installation 33 | 34 | You can install the package via NuGet. 35 | Requires .NET 8 or later. 36 | 37 | ``` 38 | dotnet add package Squircle.Blazor 39 | ``` 40 | 41 | NuGet 42 | 43 | [https://www.nuget.org/packages/Squircle.Blazor/](https://www.nuget.org/packages/Squircle.Blazor/) 44 | 45 | ## Usage 46 | 47 | ```html 48 | 49 | 50 |
Content
51 | 52 | 53 | ``` 54 | 55 | It also accept any div property and passes it to the holder. 56 | 57 | ```cs 58 | /// 59 | /// Gets or sets the CSS class for the SquircleElement component. 60 | /// 61 | [Parameter] 62 | public string? Class { get; set; } 63 | 64 | /// 65 | /// Gets or sets the inline style for the SquircleElement component. 66 | /// 67 | [Parameter] 68 | public string? Style { get; set; } 69 | 70 | /// 71 | /// Gets or sets the radius of the SquircleElement. 72 | /// 73 | [Parameter] 74 | public float? Radius { get; set; } 75 | 76 | /// 77 | /// Gets or sets the smoothness of the SquircleElement. 78 | /// Recommended to set range 0 - 0.4. 79 | /// The default value is the ratio of iOS default. 80 | /// 81 | [Parameter] 82 | public float? Smoothness { get; set; } 83 | 84 | /// 85 | /// Gets or sets the child content of the SquircleElement. 86 | /// 87 | [Parameter] 88 | public RenderFragment? ChildContent { get; set; } 89 | ``` 90 | 91 | Note: box-shadow will not be visible because under the hood squircle is based on css masks. 92 | Please consider using filter drop-shadow. 93 | 94 | ```html 95 | 96 |
97 | 98 |
Content
99 | 100 |
101 | 102 | ``` 103 | 104 | ### Sample 105 | 106 | [https://github.com/le-nn/blazor-squircle/tree/main/demo/Squircle.Blazor.Demo](https://github.com/le-nn/blazor-squircle/tree/main/demo/Squircle.Blazor.Demo) 107 | 108 | -------------------------------------------------------------------------------- /Squircle.sln: -------------------------------------------------------------------------------- 1 | Microsoft Visual Studio Solution File, Format Version 12.00 2 | # Visual Studio Version 17 3 | VisualStudioVersion = 17.10.34814.14 4 | MinimumVisualStudioVersion = 10.0.40219.1 5 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "_root", "_root", "{C4034B31-16F1-9644-053A-65FFABCF55C7}" 6 | ProjectSection(SolutionItems) = preProject 7 | .editorconfig = .editorconfig 8 | .github\workflows\build-and-deploy.yml = .github\workflows\build-and-deploy.yml 9 | .gitignore = .gitignore 10 | Directory.Build.props = Directory.Build.props 11 | LICENSE.txt = LICENSE.txt 12 | overlay.png = overlay.png 13 | overview.png = overview.png 14 | README.md = README.md 15 | EndProjectSection 16 | EndProject 17 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "test", "test", "{0C88DD14-F956-CE84-757C-A364CCF449FC}" 18 | EndProject 19 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{827E0CD3-B72D-47B6-A68D-7590B98EB39B}" 20 | EndProject 21 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "demo", "demo", "{A39C23D2-F2C0-258D-165A-CF1E7FEE6E7B}" 22 | EndProject 23 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Squircle.Test", "test\Squircle.Test\Squircle.Test.csproj", "{B1A44E58-C037-F75A-722B-1EABAB1A11A3}" 24 | EndProject 25 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Squircle.Blazor", "src\Squircle.Blazor\Squircle.Blazor.csproj", "{F233572C-7A15-C008-A551-0476D6A22B98}" 26 | EndProject 27 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Squircle.Blazor.Demo", "demo\Squircle.Blazor.Demo\Squircle.Blazor.Demo.csproj", "{C3DD7ED7-FB3D-AC8E-5E83-7AC6472DEB3A}" 28 | EndProject 29 | Global 30 | GlobalSection(ExtensibilityGlobals) = postSolution 31 | SolutionGuid = {701E5BB9-EAB6-4A2C-8FC3-40250DF904A4} 32 | EndGlobalSection 33 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 34 | Debug|Any CPU = Debug|Any CPU 35 | Release|Any CPU = Release|Any CPU 36 | EndGlobalSection 37 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 38 | {B1A44E58-C037-F75A-722B-1EABAB1A11A3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 39 | {B1A44E58-C037-F75A-722B-1EABAB1A11A3}.Debug|Any CPU.Build.0 = Debug|Any CPU 40 | {B1A44E58-C037-F75A-722B-1EABAB1A11A3}.Release|Any CPU.ActiveCfg = Release|Any CPU 41 | {B1A44E58-C037-F75A-722B-1EABAB1A11A3}.Release|Any CPU.Build.0 = Release|Any CPU 42 | {F233572C-7A15-C008-A551-0476D6A22B98}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 43 | {F233572C-7A15-C008-A551-0476D6A22B98}.Debug|Any CPU.Build.0 = Debug|Any CPU 44 | {F233572C-7A15-C008-A551-0476D6A22B98}.Release|Any CPU.ActiveCfg = Release|Any CPU 45 | {F233572C-7A15-C008-A551-0476D6A22B98}.Release|Any CPU.Build.0 = Release|Any CPU 46 | {C3DD7ED7-FB3D-AC8E-5E83-7AC6472DEB3A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 47 | {C3DD7ED7-FB3D-AC8E-5E83-7AC6472DEB3A}.Debug|Any CPU.Build.0 = Debug|Any CPU 48 | {C3DD7ED7-FB3D-AC8E-5E83-7AC6472DEB3A}.Release|Any CPU.ActiveCfg = Release|Any CPU 49 | {C3DD7ED7-FB3D-AC8E-5E83-7AC6472DEB3A}.Release|Any CPU.Build.0 = Release|Any CPU 50 | EndGlobalSection 51 | GlobalSection(SolutionProperties) = preSolution 52 | HideSolutionNode = FALSE 53 | EndGlobalSection 54 | GlobalSection(NestedProjects) = preSolution 55 | {B1A44E58-C037-F75A-722B-1EABAB1A11A3} = {0C88DD14-F956-CE84-757C-A364CCF449FC} 56 | {F233572C-7A15-C008-A551-0476D6A22B98} = {827E0CD3-B72D-47B6-A68D-7590B98EB39B} 57 | {C3DD7ED7-FB3D-AC8E-5E83-7AC6472DEB3A} = {A39C23D2-F2C0-258D-165A-CF1E7FEE6E7B} 58 | EndGlobalSection 59 | EndGlobal 60 | -------------------------------------------------------------------------------- /Squircle.slnx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/Layout/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 |
3 |
4 |
5 | @Body 6 |
7 |
8 |
9 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/Layout/MainLayout.razor.css: -------------------------------------------------------------------------------- 1 | .page { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | main { 8 | flex: 1; 9 | } 10 | 11 | .sidebar { 12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 13 | } 14 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/Pages/Home.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | 3 | Blazor Squircle DEMO 4 | 5 |
6 |
7 |
8 |
9 | 10 | 11 |
12 |

@_size

13 |
14 | 15 |
16 |
17 | 18 | 19 |
20 | 21 |

@(_smoothness?.ToString() ?? "Default")

22 |
23 | 24 |
25 |
26 | 27 | 28 |
29 | 30 |

@(_radius?.ToString() ?? "Auto")

31 |
32 |
33 | 34 |
35 |
36 | Squircle 37 | Squircle 38 |
39 | 40 |
41 |
Rectangle
42 |
Rectangle
43 |
44 |
45 |
46 | 47 | @code { 48 | float _size = 100; 49 | float? _smoothness = null; 50 | float? _radius = null; 51 | 52 | string HalfStyle => $"background:linear-gradient(0deg, #dd4e83, #28a1aa);width: {_size}px;height:{_size / 2}px;display:flex;align-items: center;justify-content: center;"; 53 | string Style => $"background:linear-gradient(0deg, #dd4e83, #28a1aa);width: {_size}px;height:{_size}px;display:flex;align-items: center;justify-content: center;"; 54 | } -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Web; 2 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 3 | using Squircle.Blazor.Demo; 4 | 5 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 6 | builder.RootComponents.Add("#app"); 7 | builder.RootComponents.Add("head::after"); 8 | 9 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 10 | 11 | await builder.Build().RunAsync(); 12 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/launchsettings.json", 3 | "profiles": { 4 | "http": { 5 | "commandName": "Project", 6 | "dotnetRunMessages": true, 7 | "launchBrowser": true, 8 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 9 | "applicationUrl": "http://localhost:5147", 10 | "environmentVariables": { 11 | "ASPNETCORE_ENVIRONMENT": "Development" 12 | } 13 | }, 14 | "https": { 15 | "commandName": "Project", 16 | "dotnetRunMessages": true, 17 | "launchBrowser": true, 18 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 19 | "applicationUrl": "https://localhost:7135;http://localhost:5147", 20 | "environmentVariables": { 21 | "ASPNETCORE_ENVIRONMENT": "Development" 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/Squircle.Blazor.Demo.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http 8 | @using Microsoft.JSInterop 9 | @using Squircle.Blazor.Demo 10 | @using Squircle.Blazor.Demo.Layout 11 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/wwwroot/css/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | } 4 | 5 | h1:focus { 6 | outline: none; 7 | } 8 | 9 | a, .btn-link { 10 | color: #0071c1; 11 | } 12 | 13 | .btn-primary { 14 | color: #fff; 15 | background-color: #1b6ec2; 16 | border-color: #1861ac; 17 | } 18 | 19 | .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { 20 | box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; 21 | } 22 | 23 | .content { 24 | padding-top: 1.1rem; 25 | } 26 | 27 | .valid.modified:not([type=checkbox]) { 28 | outline: 1px solid #26b050; 29 | } 30 | 31 | .invalid { 32 | outline: 1px solid red; 33 | } 34 | 35 | .validation-message { 36 | color: red; 37 | } 38 | 39 | #blazor-error-ui { 40 | background: lightyellow; 41 | bottom: 0; 42 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 43 | display: none; 44 | left: 0; 45 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 46 | position: fixed; 47 | width: 100%; 48 | z-index: 1000; 49 | } 50 | 51 | #blazor-error-ui .dismiss { 52 | cursor: pointer; 53 | position: absolute; 54 | right: 0.75rem; 55 | top: 0.5rem; 56 | } 57 | 58 | .blazor-error-boundary { 59 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 60 | padding: 1rem 1rem 1rem 3.7rem; 61 | color: white; 62 | } 63 | 64 | .blazor-error-boundary::after { 65 | content: "An error has occurred." 66 | } 67 | 68 | .loading-progress { 69 | position: relative; 70 | display: block; 71 | width: 8rem; 72 | height: 8rem; 73 | margin: 20vh auto 1rem auto; 74 | } 75 | 76 | .loading-progress circle { 77 | fill: none; 78 | stroke: #e0e0e0; 79 | stroke-width: 0.6rem; 80 | transform-origin: 50% 50%; 81 | transform: rotate(-90deg); 82 | } 83 | 84 | .loading-progress circle:last-child { 85 | stroke: #1b6ec2; 86 | stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; 87 | transition: stroke-dasharray 0.05s ease-in-out; 88 | } 89 | 90 | .loading-progress-text { 91 | position: absolute; 92 | text-align: center; 93 | font-weight: bold; 94 | inset: calc(20vh + 3.25rem) 0 auto 0.2rem; 95 | } 96 | 97 | .loading-progress-text:after { 98 | content: var(--blazor-load-percentage-text, "Loading"); 99 | } 100 | 101 | code { 102 | color: #c02d76; 103 | } 104 | -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-nn/blazor-squircle/6b41b9b90306f5fd9a0cdf2d55943b4219456b86/demo/Squircle.Blazor.Demo/wwwroot/favicon.ico -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/wwwroot/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-nn/blazor-squircle/6b41b9b90306f5fd9a0cdf2d55943b4219456b86/demo/Squircle.Blazor.Demo/wwwroot/icon-192.png -------------------------------------------------------------------------------- /demo/Squircle.Blazor.Demo/wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Squircle.Blazor.Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 |
24 | An unhandled error has occurred. 25 | Reload 26 | 🗙 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-nn/blazor-squircle/6b41b9b90306f5fd9a0cdf2d55943b4219456b86/logo.png -------------------------------------------------------------------------------- /nuget.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-nn/blazor-squircle/6b41b9b90306f5fd9a0cdf2d55943b4219456b86/overlay.png -------------------------------------------------------------------------------- /overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/le-nn/blazor-squircle/6b41b9b90306f5fd9a0cdf2d55943b4219456b86/overview.png -------------------------------------------------------------------------------- /src/Squircle.Blazor/PathGenerator.cs: -------------------------------------------------------------------------------- 1 | using System.Runtime.CompilerServices; 2 | using System.Text.RegularExpressions; 3 | 4 | namespace Squircle.Blazor; 5 | 6 | public static class SquirclePathGenerator { 7 | [MethodImpl(MethodImplOptions.AggressiveInlining)] 8 | public static string GenerateSquirclePath(double w, double h, double r1, double r2) { 9 | r1 = Math.Min(r1, r2); 10 | var path = $""" 11 | M 0,{r2} 12 | C 0,{r1} {r1},0 {r2},0 13 | L {w - r2},0 14 | C {w - r1},0 {w},{r1} {w},{r2} 15 | L {w},{h - r2} 16 | C {w},{h - r1} {w - r1},{h} {w - r2},{h} 17 | L {r2},{h} 18 | C {r1},{h} 0,{h - r1} 0,{h - r2} 19 | L 0,{r2} 20 | """; 21 | 22 | return path.Trim().Replace('\n', ' '); 23 | } 24 | 25 | [MethodImpl(MethodImplOptions.AggressiveInlining)] 26 | public static string GetSquirclePathAsDataUri(double w, double h, double r1, double r2) { 27 | var id = $"squircle-{w}-{h}-{r1}-{r2}"; 28 | var path = GenerateSquirclePath(w, h, r1, r2); 29 | var svg = $""" 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | """; 39 | 40 | svg = svg.Trim().Replace("\n", "").Replace(" {2,}", ""); 41 | 42 | var data1 = svg.Replace('"', '\'') 43 | .Replace(">\\s+<", "><") 44 | .Replace("\\s{2,}", " "); 45 | 46 | // Encode special characters 47 | var data2 = Regex.Replace(data1, @"[\r\n%#()<>?[\\\]^\`{|}]", m => Uri.EscapeDataString(m.Value)); 48 | 49 | 50 | return $"data:image/svg+xml,{data2}"; 51 | } 52 | } -------------------------------------------------------------------------------- /src/Squircle.Blazor/ResizeObserver.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.JSInterop; 3 | using System.Diagnostics.CodeAnalysis; 4 | 5 | namespace Squircle.Blazor; 6 | 7 | class ResizeObserver { 8 | static bool _isInitialized; 9 | 10 | const string _observeSymbol = "__squircle_observe"; 11 | const string _disposeSymbol = "__squircle_dispose"; 12 | 13 | const string _src = $$""" 14 | function __squircle_removeElementFromArray(array, elem) { 15 | const index = array.indexOf(elem); 16 | if (index === -1) { 17 | return; 18 | } 19 | array.splice(array.indexOf(elem), 1); 20 | } 21 | 22 | const __squircle_resizeListenersMap = new WeakMap(); 23 | const __squircle_observedElements = new Set(); 24 | let observer; 25 | 26 | function __squircle_getObserver() { 27 | if (observer) { 28 | return observer; 29 | } 30 | 31 | const newObserver = new ResizeObserver(entries => { 32 | for (const entry of entries) { 33 | const listeners = __squircle_resizeListenersMap.get(entry.target); 34 | if (!listeners) { 35 | continue; 36 | } 37 | 38 | listeners.forEach(callback => { 39 | callback(entry); 40 | }); 41 | } 42 | }); 43 | 44 | observer = newObserver; 45 | return newObserver; 46 | } 47 | 48 | function {{_observeSymbol}}(element, dotnetAction){ 49 | // This would fail in tests as there is no resize observer in jsdom. 50 | // We don't 'resize' window in tests, tho. 51 | if (!ResizeObserver) { 52 | throw new Error("there is no resize observer in jsdom"); 53 | } 54 | 55 | 56 | const currentObservers = __squircle_resizeListenersMap.get(element) || []; 57 | 58 | const handleResize = entry => { 59 | console.log(entry) 60 | dotnetAction.invokeMethodAsync("Invoke",entry.contentRect.width,entry.contentRect.height) 61 | } 62 | 63 | currentObservers.push(handleResize); 64 | __squircle_resizeListenersMap.set(element, currentObservers); 65 | 66 | if (!__squircle_observedElements.has(element)) { 67 | __squircle_getObserver().observe(element); 68 | } 69 | 70 | return { 71 | dispose: () => { 72 | __squircle_removeElementFromArray(currentObservers, handleResize); 73 | if (currentObservers.length === 0) { 74 | __squircle_getObserver().unobserve(element); 75 | __squircle_observedElements.delete(element); 76 | } 77 | } 78 | }; 79 | } 80 | 81 | function {{_disposeSymbol}}(subscription) { 82 | subscription.dispose(); 83 | } 84 | """; 85 | 86 | public static async Task ObserveAsync(IJSRuntime jsRuntime, ElementReference element, Action action) { 87 | if (element.Equals(default) || element.Id is null or "") { 88 | return new Subscription(() => ValueTask.CompletedTask); 89 | } 90 | 91 | 92 | if (_isInitialized is false) { 93 | await jsRuntime.InvokeVoidAsync("eval", _src); 94 | _isInitialized = true; 95 | } 96 | 97 | var wrapper = new ActionWrapper(action); 98 | var actionRef = DotNetObjectReference.Create(wrapper); 99 | var subscription = await jsRuntime.InvokeAsync(_observeSymbol, element, actionRef); 100 | 101 | return new Subscription(async () => { 102 | await jsRuntime.InvokeVoidAsync(_disposeSymbol, subscription); 103 | await subscription.DisposeAsync(); 104 | actionRef.Dispose(); 105 | }); 106 | } 107 | 108 | class Subscription(Func action) : IAsyncDisposable { 109 | public async ValueTask DisposeAsync() { 110 | await action.Invoke(); 111 | } 112 | } 113 | 114 | [method: DynamicDependency(nameof(Invoke))] 115 | class ActionWrapper(Action action) { 116 | public Action _action = action; 117 | 118 | [JSInvokable] 119 | public void Invoke(float width, float height) => _action.Invoke(width, height); 120 | } 121 | 122 | } 123 | 124 | -------------------------------------------------------------------------------- /src/Squircle.Blazor/Squircle.Blazor.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | net8.0 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/Squircle.Blazor/SquircleElement.razor: -------------------------------------------------------------------------------- 1 | 2 | 3 |
7 | @ChildContent 8 |
-------------------------------------------------------------------------------- /src/Squircle.Blazor/SquircleElement.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.JSInterop; 3 | using System.Collections.Concurrent; 4 | 5 | namespace Squircle.Blazor; 6 | 7 | /// 8 | /// Squircle shape component like iOS corner radius. 9 | /// 10 | public partial class SquircleElement : ComponentBase, IAsyncDisposable { 11 | private const float _defaultSmoothness = 0.0586f / 0.332f; 12 | private ElementReference _divRef; 13 | private float _width = default; 14 | private float _height = default; 15 | private bool _isDisposed = false; 16 | private IAsyncDisposable? _subscription; 17 | static readonly ConcurrentDictionary _cache = []; 18 | 19 | /// 20 | /// Gets or sets the CSS class for the SquircleElement component. 21 | /// 22 | [Parameter] 23 | public string? Class { get; set; } 24 | 25 | /// 26 | /// Gets or sets the inline style for the SquircleElement component. 27 | /// 28 | [Parameter] 29 | public string? Style { get; set; } 30 | 31 | /// 32 | /// Gets or sets the radius of the SquircleElement. 33 | /// 34 | [Parameter] 35 | public float? Radius { get; set; } 36 | 37 | /// 38 | /// Gets or sets the smoothness of the SquircleElement. 39 | /// Recommended to set range 0 - 0.4. 40 | /// The default value is the ratio of iOS default. 41 | /// 42 | [Parameter] 43 | public float? Smoothness { get; set; } = _defaultSmoothness; 44 | 45 | /// 46 | /// Gets or sets the child content of the SquircleElement. 47 | /// 48 | [Parameter] 49 | public RenderFragment? ChildContent { get; set; } 50 | 51 | /// 52 | /// Gets or sets additional attributes for the SquircleElement. 53 | /// 54 | [Parameter(CaptureUnmatchedValues = true)] 55 | public IDictionary? AdditionalAttributes { get; set; } 56 | 57 | /// 58 | /// Gets the injected IJSRuntime instance. 59 | /// 60 | [Inject] 61 | public required IJSRuntime JSRuntime { get; set; } 62 | 63 | /// 64 | /// Gets the count of cached styles. 65 | /// 66 | public int CacheCount => _cache.Count; 67 | 68 | /// 69 | /// Clears the cache of generated styles. 70 | /// 71 | public void ClearCache() { 72 | _cache.Clear(); 73 | } 74 | 75 | /// 76 | /// Disposes the SquircleElement component and clears the cache. 77 | /// 78 | public async ValueTask DisposeAsync() { 79 | _isDisposed = true; 80 | _cache.Clear(); 81 | await (_subscription?.DisposeAsync() ?? ValueTask.CompletedTask); 82 | _subscription = null; 83 | } 84 | 85 | /// 86 | /// Called after each render of the component. 87 | /// Subscribes to the ResizeObserver if it's the first render and the component is not disposed. 88 | /// 89 | protected override async Task OnAfterRenderAsync(bool firstRender) { 90 | if (firstRender && _isDisposed is false) { 91 | _subscription = await ResizeObserver.ObserveAsync(JSRuntime, _divRef, OnResized); 92 | } 93 | } 94 | 95 | /// 96 | /// Called when the size of the SquircleElement changes. 97 | /// Updates the width and height values and triggers a re-render of the component. 98 | /// 99 | async void OnResized(float width, float height) { 100 | if (width != _width || height != _height) { 101 | _width = width; 102 | _height = height; 103 | await InvokeAsync(StateHasChanged); 104 | } 105 | } 106 | 107 | /// 108 | /// Gets the style string for the SquircleElement based on the current dimensions, radius, and smoothness. 109 | /// Caches the generated style to improve performance. 110 | /// 111 | string GetStyle() { 112 | var width = _width; 113 | var height = _height; 114 | var radius = Radius; 115 | var smoothness = Smoothness ?? _defaultSmoothness; 116 | var key = $"{width}-{height}-{radius}-{smoothness}"; 117 | 118 | if (_cache.ContainsKey(key)) { 119 | return Style + _cache[key]; 120 | } 121 | else { 122 | var mask = GetMaskStyle(width, height, radius, smoothness); 123 | _cache[key] = mask; 124 | return Style + mask; 125 | } 126 | } 127 | 128 | /// 129 | /// Generates the mask style string for the SquircleElement based on the provided dimensions, radius, and smoothness. 130 | /// 131 | static string GetMaskStyle(float width, float height, float? radius, float smoothness) { 132 | var maxBorderRadius = Math.Min(width, height) / 2; 133 | var finalBorderRadius = Math.Min(radius ?? maxBorderRadius, maxBorderRadius); 134 | var dataUri = SquirclePathGenerator.GetSquirclePathAsDataUri( 135 | width, 136 | height, 137 | finalBorderRadius * smoothness, 138 | finalBorderRadius 139 | ); 140 | 141 | return $""" 142 | mask-image: url("{dataUri}"); 143 | mask-position: center; 144 | mask-repeat: no-repeat; 145 | """; 146 | } 147 | } -------------------------------------------------------------------------------- /src/Squircle.Blazor/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | -------------------------------------------------------------------------------- /test/Squircle.Test/Div.razor: -------------------------------------------------------------------------------- 1 |
2 | TEST 3 |
-------------------------------------------------------------------------------- /test/Squircle.Test/Squircle.Test.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0 5 | enable 6 | enable 7 | 8 | false 9 | true 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /test/Squircle.Test/SquircleElementTest.cs: -------------------------------------------------------------------------------- 1 | using Bunit; 2 | using Squircle.Blazor; 3 | 4 | namespace Squircle.Test; 5 | 6 | public class SquircleElementTest : TestContext { 7 | [Fact] 8 | public void Test1() { 9 | JSInterop.Mode = JSRuntimeMode.Loose; 10 | JSInterop.SetupVoid("eval").SetVoidResult(); 11 | JSInterop.SetupVoid("dispose").SetVoidResult(); 12 | 13 | var component = RenderComponent(el => { 14 | el.AddChildContent
(); 15 | }); 16 | 17 | Assert.Equal(1, component.Instance.CacheCount); 18 | 19 | component.SetParametersAndRender(c => { 20 | c.Add(p => p.Smoothness, 0.2f); 21 | }); 22 | 23 | // Check if cache is increased 24 | Assert.Equal(2, component.Instance.CacheCount); 25 | 26 | // Check if cache is cleared 27 | component.Instance.ClearCache(); 28 | Assert.Equal(0, component.Instance.CacheCount); 29 | 30 | component.Dispose(); 31 | } 32 | } --------------------------------------------------------------------------------