feat(module:qrcode): support nzType && nzBoostLevel, delete nzPadding #9535

OriginRing · 2025-11-17T10:10:46Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
Application (the showcase website) / infrastructure changes
Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

Yes
No

Other information

codecov · 2025-11-17T10:16:50Z

Codecov Report

❌ Patch coverage is 64.25856% with 94 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.52%. Comparing base (0e095a1) to head (fe281f5).
⚠️ Report is 20 commits behind head on master.

Files with missing lines	Patch %	Lines
components/qr-code/qrcode-canvas.component.ts	56.66%	27 Missing and 12 partials ⚠️
components/qr-code/qrcode.component.ts	54.16%	1 Missing and 21 partials ⚠️
components/qr-code/qrcode-svg.component.ts	62.79%	4 Missing and 12 partials ⚠️
components/qr-code/utils.ts	79.10%	8 Missing and 6 partials ⚠️
components/qr-code/useQRCode.ts	80.00%	2 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9535      +/-   ##
==========================================
+ Coverage   90.06%   90.52%   +0.45%     
==========================================
  Files         570      564       -6     
  Lines       23379    23003     -376     
  Branches     4650     4606      -44     
==========================================
- Hits        21057    20823     -234     
+ Misses       1614     1419     -195     
- Partials      708      761      +53

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull Request Overview

This PR refactors the QR code component to support multiple rendering types (canvas and SVG) and introduces a new nzBoostLevel property for automatic error correction optimization. The implementation migrates from the old decorator-based API to Angular's modern signal-based API, splitting the rendering logic into separate canvas and SVG components.

Key changes:

Introduces nzType input to switch between 'canvas' and 'svg' rendering
Adds nzBoostLevel property to enable automatic error correction level boosting
Removes the nzPadding property (breaking change)
Migrates to signal-based inputs/outputs and reactive state management

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
components/qr-code/utils.ts	New utility file providing QR code generation helpers (path generation, module excavation, image settings calculation)
components/qr-code/useQRCode.ts	New QR code generation hook that encapsulates the core QR encoding logic
components/qr-code/typing.ts	TypeScript type definitions for QR code properties, including new types for rendering options
components/qr-code/qrcode.component.ts	Main component refactored to use signals, delegates rendering to child components based on nzType
components/qr-code/qrcode-canvas.component.ts	New canvas-based renderer component handling canvas drawing and image overlay
components/qr-code/qrcode-svg.component.ts	New SVG-based renderer component handling SVG path generation and image embedding
components/qr-code/qrcode.ts	Removed - old implementation replaced by new modular architecture
components/qr-code/qrcode.spec.ts	Removed - old tests for formatPadding function no longer applicable
components/qr-code/qrcode.module.ts	Updated to import and export new canvas and SVG components
components/qr-code/qrcode.component.spec.ts	Added test for new nzType property, updated selector for canvas element
components/qr-code/public-api.ts	Exports new typing definitions for external consumption
components/qr-code/doc/index.zh-CN.md	Updated documentation with nzType and nzBoostLevel properties, removed nzPadding
components/qr-code/doc/index.en-US.md	Updated documentation with nzType and nzBoostLevel properties, removed nzPadding
components/qr-code/demo/type.ts	New demo showing canvas vs SVG rendering types
components/qr-code/demo/type.md	Documentation for the type demo
components/qr-code/demo/padding.md	Removed - padding feature no longer supported

components/qr-code/doc/index.zh-CN.md

components/qr-code/qrcode.component.ts

components/qr-code/utils.ts

components/qr-code/qrcode.component.ts

components/qr-code/qrcode-svg.component.ts

components/qr-code/qrcode-canvas.component.ts

Copilot · 2025-11-21T09:29:10Z

components/qr-code/qrcode-svg.component.ts

+  selector: 'nz-qrcode-svg',
+  exportAs: 'nzQRCodeSVG',
+  template: `
+    <svg [attr.height]="size()" [attr.width]="size()" [attr.viewBox]="viewBox" role="img">


The SVG element has role="img" but is missing an accessible label. Add an aria-label or allow passing a title input (like the title property defined in QRProps interface in typing.ts) to provide screen readers with meaningful context about the QR code content.

components/qr-code/qrcode-canvas.component.ts

Copilot · 2025-11-21T09:29:11Z

components/qr-code/qrcode-canvas.component.ts

+    this.canvas.nativeElement.height = this.canvas.nativeElement.width = this.size() * pixelRatio;
+    this.canvas.nativeElement.style.width = this.canvas.nativeElement.style.height = `${this.size()}px`;
+
+    const scale = (this.size() / this.numCells()) * pixelRatio;


Canvas transformation state issue: ctx.scale() is called on every render without resetting the transform first. This will cause the scale to accumulate on subsequent renders, leading to incorrect rendering. Add ctx.setTransform(1, 0, 0, 1, 0, 0) before scaling to reset the transformation matrix.

Suggested change

const scale = (this.size() / this.numCells()) * pixelRatio;

const scale = (this.size() / this.numCells()) * pixelRatio;

ctx.setTransform(1, 0, 0, 1, 0, 0);

Copilot · 2025-11-21T09:29:11Z

components/qr-code/qrcode.component.ts

+    return {
+      src: this.nzIcon(),
+      x: undefined,
+      y: undefined,
+      height: this.nzIconSize() ?? 40,
+      width: this.nzIconSize() ?? 40,
+      excavate: true,
+      crossOrigin: 'anonymous'
+    };


The imageSettings computed signal is recalculated whenever any input changes, but it's always recreated with the same structure. Consider using a more efficient approach or memoization to avoid unnecessary object recreations when the icon-related inputs haven't changed.

Suggested change

return {

src: this.nzIcon(),

x: undefined,

y: undefined,

height: this.nzIconSize() ?? 40,

width: this.nzIconSize() ?? 40,

excavate: true,

crossOrigin: 'anonymous'

};

// Memoization: only recreate the object if icon-related inputs change

// Use closure variables to cache previous values and object

type IconInputs = { src: string; size: number };

// Static closure variables

let prev: IconInputs | undefined;

let cached: ImageSettings | undefined;

const src = this.nzIcon();

const size = this.nzIconSize() ?? 40;

if (!prev || prev.src !== src || prev.size !== size) {

prev = { src, size };

cached = {

src,

x: undefined,

y: undefined,

height: size,

width: size,

excavate: true,

crossOrigin: 'anonymous'

};

}

return cached!;

Laffery · 2025-11-25T04:19:45Z

components/qr-code/demo/type.md

@@ -0,0 +1,15 @@
+---
+order: 5
+version: 20.5.0


20.5.0 is not planned

Laffery · 2025-11-25T04:24:49Z

components/qr-code/useQRCode.ts

+import QrSegment = qrcodegen.QrSegment;
+import QrCode = qrcodegen.QrCode;
+
+export const useQRCode = (


useXxx is a react-style name, please change to angular style

Laffery · 2025-11-25T04:27:24Z

components/qr-code/qrcode-canvas.component.ts

+  readonly bgColor = input<string>(DEFAULT_BACKGROUND_COLOR);
+
+  constructor() {
+    effect(() => {


what about using ngOnChanges instead?

In signals-based components, ngOnChanges is invalid.

Laffery · 2025-11-25T04:31:29Z

components/qr-code/qrcode.module.ts


 @NgModule({
-  imports: [NzQRCodeComponent],
+  imports: [NzQRCodeComponent, NzQrcodeCanvasComponent, NzQrcodeSvgComponent],


NzQrcodeCanvasComponent and NzQrcodeSvgComponent are imported in NzQRCodeComponent, they are redundant here.

Laffery · 2025-11-25T05:57:36Z

components/qr-code/doc/index.en-US.md

 description: Convert text into QR codes, and support custom color and logo.
 ---

+> ⚠️ `nzPadding` has been removed in `v20.5.0`.


我觉得最好先保留 nzPadding，标准的做法是在文档/代码中将其标记为弃用，我们可以在 v22 中正式移除它。

OriginRing linked an issue Nov 17, 2025 that may be closed by this pull request

QRCode API 同步 antd #9533

Open

OriginRing force-pushed the ref/qrcode branch from 6dea67e to 367b59a Compare November 17, 2025 10:12

OriginRing force-pushed the ref/qrcode branch 2 times, most recently from 62ea26c to 83bb521 Compare November 17, 2025 10:34

HyperLife1119 added 💔 Breaking Change This PR or the solution to this issue would introduce breaking changes PR: target-major Component: QRCode labels Nov 21, 2025

HyperLife1119 requested a review from Copilot November 21, 2025 09:19

Copilot started reviewing on behalf of HyperLife1119 November 21, 2025 09:20 View session

Copilot finished reviewing on behalf of HyperLife1119 November 21, 2025 09:25

Copilot AI reviewed Nov 21, 2025

View reviewed changes

feat(module:qrcode): support nzType && nzBoostLevel, delete nzPadding

fe281f5

OriginRing force-pushed the ref/qrcode branch from 83bb521 to fe281f5 Compare November 24, 2025 05:37

Laffery reviewed Nov 25, 2025

View reviewed changes

components/qr-code/demo/type.md

@@ -0,0 +1,15 @@

---

order: 5

version: 20.5.0

Copy link

Collaborator

Laffery Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

20.5.0 is not planned

Laffery reviewed Nov 25, 2025

View reviewed changes

HyperLife1119 added the PR: reviewed-changes-requested label Nov 27, 2025

	const scale = (this.size() / this.numCells()) * pixelRatio;
	const scale = (this.size() / this.numCells()) * pixelRatio;
	ctx.setTransform(1, 0, 0, 1, 0, 0);

-    return {
-      src: this.nzIcon(),
-      x: undefined,
-      y: undefined,
-      height: this.nzIconSize() ?? 40,
-      width: this.nzIconSize() ?? 40,
-      excavate: true,
-      crossOrigin: 'anonymous'
-    };
+    // Memoization: only recreate the object if icon-related inputs change
+    // Use closure variables to cache previous values and object
+    type IconInputs = { src: string; size: number };
+    // Static closure variables
+    let prev: IconInputs | undefined;
+    let cached: ImageSettings | undefined;
+    const src = this.nzIcon();
+    const size = this.nzIconSize() ?? 40;
+    if (!prev || prev.src !== src || prev.size !== size) {
+      prev = { src, size };
+      cached = {
+        src,
+        x: undefined,
+        y: undefined,
+        height: size,
+        width: size,
+        excavate: true,
+        crossOrigin: 'anonymous'
+      };
+    }
+    return cached!;

feat(module:qrcode): support nzType && nzBoostLevel, delete nzPadding #9535

Are you sure you want to change the base?

feat(module:qrcode): support nzType && nzBoostLevel, delete nzPadding #9535

Uh oh!

Conversation

OriginRing commented Nov 17, 2025 • edited by HyperLife1119 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

codecov bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Laffery Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

Laffery Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

Laffery Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

HyperLife1119 Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Laffery Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

Laffery Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

OriginRing commented Nov 17, 2025 •

edited by HyperLife1119

Loading

codecov bot commented Nov 17, 2025 •

edited

Loading