fuqr bitflags

Author: zhengkyl

README.md

@@ -122,14 +122,16 @@ A preset must export `paramsSchema` and either `renderSVG` or `renderCanvas`
 This schema defines the UI components whose values are passed into `renderSVG` or `renderCanvas` via the `params` object.
 
 All properties besides `type` are optional, except
+
 - type `select` must have a nonempty options array
 - type `array` must have a valid `props` value.
 
 In this example, `default` is set explicitly to the implicit default value.
+
 ```js
 export const paramsSchema = {
   Example1: {
-    type: "number"
+    type: "number",
     min: 0,
     max: 10,
     step: 0.1,
@@ -141,29 +143,29 @@ export const paramsSchema = {
   },
   Example3: {
     type: "color",
-    default: "#000000"
+    default: "#000000", // css color string (hex/rgba/hsla)
   },
   Example4: {
     type: "select",
-    options: ["I'm feeling", 22]
-    default: "I'm feeling",
+    options: ["I'm feeling", 22],
+    default: "I'm feeling", // first option
   },
   Example5: {
     type: "file",
-    accept: ".jpeg, .jpg, .png"
+    accept: ".jpeg, .jpg, .png",
     default: null,
   },
   Example6: {
     type: "array",
     props: {
-      type: "number" // any type except "array"
+      type: "number", // any type except "array"
       // corresponding props
     },
     resizable: true,
     defaultLength: 5, // overridden by default
     default: [], // overrides defaultLength
-  }
-}
+  },
+};
 ```
 
 ## `renderSVG` and `renderCanvas`
@@ -180,27 +182,24 @@ type renderCanvas = (qr: Qr, params: Params, canvas: OffscreenCanvas) => void;
 
 ```ts
 type Qr = {
-  matrix: Module[] // see below
+  matrix: Uint8Array; // see below
   version: number; // 1- 40
-  mask: number; // 0 - 8,
+  mask: number; // 0 - 7,
   ecl: number; // 0 - 3, Low, Medium, Quartile, High
   mode: number; // 0 - 2, Numeric, Alphanumeric, Byte
 };
 
-enum Module {
-  DataOFF = 0,
-  DataON = 1,
-  FinderOFF = 2,
-  FinderON = 3,
-  AlignmentOFF = 4,
-  AlignmentON = 5,
-  TimingOFF = 6,
-  TimingON = 7,
-  FormatOFF = 8,
-  FormatON = 9,
-  VersionOFF = 10,
-  VersionON = 11,
-  SeparatorOFF = 12,
-}
+// bit flags for each u8 in matrix
+const Module = {
+  ON: 1 << 0,
+  DATA: 1 << 1,
+  FINDER: 1 << 2,
+  ALIGNMENT: 1 << 3,
+  TIMING: 1 << 4,
+  FORMAT: 1 << 5,
+  VERSION: 1 << 6,
+  MODIFIER: 1 << 7,
+};
 ```
 
+`MODIFIER` is set for Finder and Alignment centers, Format and Version copy.

package.json

@@ -2,7 +2,7 @@
   "name": "qrframe",
   "type": "module",
   "scripts": {
-    "dev": "vinxi dev",
+    "dev": "nr presets dev && vinxi dev",
     "build": "vinxi build",
     "start": "vinxi start",
     "presets": "node updatePresets"
@@ -22,7 +22,7 @@
     "@thisbeyond/solid-dnd": "^0.7.5",
     "@unocss/reset": "^0.59.4",
     "codemirror": "^6.0.1",
-    "fuqr": "^0.0.6",
+    "fuqr": "^0.0.7",
     "lucide-solid": "^0.378.0",
     "solid-js": "^1.8.17",
     "unocss": "^0.59.4",

pnpm-lock.yaml

@@ -1,5 +1,7 @@
 // Based on QRBTF's Line style
 // https://github.com/CPunisher/react-qrbtf/blob/master/src/components/QRLine.tsx
+import { Module, getSeededRand } from "REPLACE_URL/utils.js";
+
 export const paramsSchema = {
   Margin: {
     type: "number",
@@ -28,36 +30,8 @@ export const paramsSchema = {
   },
 };
 
-const Module = {
-  DataOFF: 0,
-  DataON: 1,
-  FinderOFF: 2,
-  FinderON: 3,
-  AlignmentOFF: 4,
-  AlignmentON: 5,
-  TimingOFF: 6,
-  TimingON: 7,
-  FormatOFF: 8,
-  FormatON: 9,
-  VersionOFF: 10,
-  VersionON: 11,
-  SeparatorOFF: 12,
-};
-
-function splitmix32(a) {
-  return function () {
-    a |= 0;
-    a = (a + 0x9e3779b9) | 0;
-    let t = a ^ (a >>> 16);
-    t = Math.imul(t, 0x21f0aaad);
-    t = t ^ (t >>> 15);
-    t = Math.imul(t, 0x735a2d97);
-    return ((t = t ^ (t >>> 15)) >>> 0) / 4294967296;
-  };
-}
-
 export function renderSVG(qr, params) {
-  const rand = splitmix32(params["Seed"]);
+  const rand = getSeededRand(params["Seed"]);
   const rangeStr = (min, max) => (rand() * (max - min) + min).toFixed(2);
 
   const matrixWidth = qr.version * 4 + 17;
@@ -117,9 +91,9 @@ export function renderSVG(qr, params) {
   for (let y = 0; y < matrixWidth; y++) {
     for (let x = 0; x < matrixWidth; x++) {
       const module = matrix(x, y);
-      if ((module | 1) === Module.FinderON) continue;
+      if (module & Module.FINDER) continue;
 
-      if (!(module & 1)) continue;
+      if (!(module & Module.ON)) continue;
       dotsLayer += `<circle cx="${x + 0.5}" cy="${y + 0.5}" r="${rangeStr(0.2, 0.4)}"/>`;
 
       if (!visited1(x, y)) {
@@ -128,7 +102,7 @@ export function renderSVG(qr, params) {
         while (
           nx < matrixWidth &&
           ny < matrixWidth &&
-          matrix(nx, ny) & 1 &&
+          matrix(nx, ny) & Module.ON &&
           !visited1(nx, ny)
         ) {
           setVisited1(nx, ny);
@@ -146,7 +120,7 @@ export function renderSVG(qr, params) {
         while (
           nx >= 0 &&
           ny < matrixWidth &&
-          matrix(nx, ny) & 1 &&
+          matrix(nx, ny) & Module.ON &&
           !visited2(nx, ny)
         ) {
           setVisited2(nx, ny);

presets/Alien.js

@@ -1,3 +1,5 @@
+import { Module } from "REPLACE_URL/utils.js";
+
 export const paramsSchema = {
   Margin: {
     type: "number",
@@ -52,22 +54,6 @@ export const paramsSchema = {
   },
 };
 
-const Module = {
-  DataOFF: 0,
-  DataON: 1,
-  FinderOFF: 2,
-  FinderON: 3,
-  AlignmentOFF: 4,
-  AlignmentON: 5,
-  TimingOFF: 6,
-  TimingON: 7,
-  FormatOFF: 8,
-  FormatON: 9,
-  VersionOFF: 10,
-  VersionON: 11,
-  SeparatorOFF: 12,
-};
-
 export async function renderSVG(qr, params) {
   const matrixWidth = qr.version * 4 + 17;
   const margin = params["Margin"];
@@ -142,8 +128,8 @@ export async function renderSVG(qr, params) {
         continue;
       }
       const module = qr.matrix[y * matrixWidth + x];
-      if (!(module & 1)) continue;
-      if (module === Module.FinderON) continue;
+      if (!(module & Module.ON)) continue;
+      if (module & Module.FINDER) continue;
 
       if (defaultShape) {
         if (roundness) {

presets/Basic.js

@@ -1,5 +1,7 @@
 // Based on QRBTF's DSJ style
 // https://github.com/CPunisher/react-qrbtf/blob/master/src/components/QRDsj.tsx
+import { Module } from "REPLACE_URL/utils.js";
+
 export const paramsSchema = {
   Margin: {
     type: "number",
@@ -51,22 +53,6 @@ export const paramsSchema = {
   },
 };
 
-const Module = {
-  DataOFF: 0,
-  DataON: 1,
-  FinderOFF: 2,
-  FinderON: 3,
-  AlignmentOFF: 4,
-  AlignmentON: 5,
-  TimingOFF: 6,
-  TimingON: 7,
-  FormatOFF: 8,
-  FormatON: 9,
-  VersionOFF: 10,
-  VersionON: 11,
-  SeparatorOFF: 12,
-};
-
 export function renderSVG(qr, params) {
   const matrixWidth = qr.version * 4 + 17;
   const margin = params["Margin"];
@@ -122,8 +108,8 @@ export function renderSVG(qr, params) {
   for (let y = 0; y < matrixWidth; y++) {
     for (let x = 0; x < matrixWidth; x++) {
       const module = matrix(x, y);
-      if ((module | 1) === Module.FinderON) continue;
-      if (!(module & 1)) continue;
+      if (module & Module.FINDER) continue;
+      if (!(module & Module.ON)) continue;
       if (visited(x, y)) continue;
       setVisited(x, y);
 
@@ -157,9 +143,13 @@ export function renderSVG(qr, params) {
       if (
         y < matrixWidth - 1 &&
         x < matrixWidth - 1 &&
-        matrix(x + 1, y) & matrix(x, y + 1) & matrix(x + 1, y + 1) & 1
+        matrix(x + 1, y) & matrix(x, y + 1) & matrix(x + 1, y + 1) & Module.ON
       ) {
-        if (!visited(x + 1, y) && !visited(x + 1, y + 1) && !visited(x, y + 1)) {
+        if (
+          !visited(x + 1, y) &&
+          !visited(x + 1, y + 1) &&
+          !visited(x, y + 1)
+        ) {
           crossLayer += `<g>`;
           crossLayer += `<line x1="${x + co}" y1="${y + co}" x2="${x + 2 - co}" y2="${y + 2 - co}"/>`;
           crossLayer += `<line x1="${x + 2 - co}" y1="${y + co}" x2="${x + co}" y2="${y + 2 - co}"/>`;
@@ -173,7 +163,7 @@ export function renderSVG(qr, params) {
       }
 
       let ny = y + 1;
-      while (ny < matrixWidth && matrix(x, ny) & 1 && !visited(x, ny)) {
+      while (ny < matrixWidth && matrix(x, ny) & Module.ON && !visited(x, ny)) {
         ny++;
       }
       if (ny - y > 2) {
@@ -186,7 +176,7 @@ export function renderSVG(qr, params) {
       }
 
       let nx = x + 1;
-      while (nx < matrixWidth && matrix(nx, y) & 1 && !visited(nx, y)) {
+      while (nx < matrixWidth && matrix(nx, y) & Module.ON && !visited(nx, y)) {
         setVisited(nx, y);
         nx++;
       }