diff --git a/README.md b/README.md
index 29ffce3..8edad56 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,12 @@ I'm working on more examples.
|
+
+ 
+ |
+
+ 
+ |
| Import external libs, fetch external files, etc |
diff --git a/examples/layers1.svg b/examples/layers1.svg
new file mode 100644
index 0000000..e64981c
--- /dev/null
+++ b/examples/layers1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/layers2.svg b/examples/layers2.svg
new file mode 100644
index 0000000..6b2a079
--- /dev/null
+++ b/examples/layers2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cde1a3..77529e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,9 +48,6 @@ importers:
'@thisbeyond/solid-dnd':
specifier: ^0.7.5
version: 0.7.5(solid-js@1.8.17)
- '@tiagotrindade/solid-colorful':
- specifier: ^1.0.2
- version: 1.0.2(solid-js@1.8.17)
'@unocss/reset':
specifier: ^0.59.4
version: 0.59.4
@@ -63,9 +60,6 @@ importers:
lucide-solid:
specifier: ^0.378.0
version: 0.378.0(solid-js@1.8.17)
- solid-color:
- specifier: link:/home/zhengkyl/fd/solid-color
- version: link:../solid-color
solid-js:
specifier: ^1.8.17
version: 1.8.17
@@ -1094,11 +1088,6 @@ packages:
peerDependencies:
solid-js: ^1.5
- '@tiagotrindade/solid-colorful@1.0.2':
- resolution: {integrity: sha512-ccyv857xkMZ8It8vkdMetH7KenjSWtfF62QYOf34Y80eTLbBhg6k7oTVvU0BJFLePv4f3NFuyrKdr14EPVyS6Q==}
- peerDependencies:
- solid-js: '*'
-
'@types/babel__core@7.20.5':
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
@@ -3977,10 +3966,6 @@ snapshots:
dependencies:
solid-js: 1.8.17
- '@tiagotrindade/solid-colorful@1.0.2(solid-js@1.8.17)':
- dependencies:
- solid-js: 1.8.17
-
'@types/babel__core@7.20.5':
dependencies:
'@babel/parser': 7.24.5
diff --git a/presets/Layers.js b/presets/Layers.js
new file mode 100644
index 0000000..03107e9
--- /dev/null
+++ b/presets/Layers.js
@@ -0,0 +1,103 @@
+export const paramsSchema = {
+ Margin: {
+ type: "number",
+ min: 0,
+ max: 10,
+ step: 0.1,
+ default: 2,
+ },
+ Background: {
+ type: "color",
+ default: "#163157",
+ },
+ // See browser compatibility issues here
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
+ "Mix blend mode": {
+ type: "select",
+ options: [
+ "normal",
+ "multiply",
+ "screen",
+ "overlay",
+ "darken",
+ "lighten",
+ "color-dodge",
+ "color-burn",
+ "hard-light",
+ "soft-light",
+ "difference",
+ "exclusion",
+ "hue",
+ "saturation",
+ "color",
+ "luminosity",
+ "plus-darker",
+ "plus-lighter",
+ ],
+ default: "difference",
+ },
+ Foreground: {
+ type: "array",
+ resizable: true,
+ props: {
+ type: "color",
+ },
+ default: ["#e80004", "#000000", "#ca70cf", "#000000", "#ffffff"],
+ },
+ "Offset x": {
+ type: "array",
+ resizable: true,
+ props: {
+ type: "number",
+ min: -1,
+ step: 0.1,
+ max: 1,
+ },
+ default: [0.6, 0.4, 0.2, 0, -0.2],
+ },
+ "Offset y": {
+ type: "array",
+ resizable: true,
+ props: {
+ type: "number",
+ min: -1,
+ step: 0.1,
+ max: 1,
+ },
+ default: [0.6, 0.4, 0.2, 0, -0.2],
+ },
+};
+
+export function renderSVG(qr, params) {
+ const matrixWidth = qr.version * 4 + 17;
+ const margin = params["Margin"];
+ const colors = params["Foreground"];
+ const offsetX = params["Offset x"];
+ const offsetY = params["Offset y"];
+ const bg = params["Background"];
+
+ const size = matrixWidth + 2 * margin;
+ let svg = ``;
+ return svg;
+}
diff --git a/src/lib/presets.ts b/src/lib/presets.ts
index b7e265f..491e98b 100644
--- a/src/lib/presets.ts
+++ b/src/lib/presets.ts
@@ -8,6 +8,7 @@ import { Dots } from "./presets/Dots";
import { Drawing } from "./presets/Drawing";
import { Glass } from "./presets/Glass";
import { Halftone } from "./presets/Halftone";
+import { Layers } from "./presets/Layers";
import { Minimal } from "./presets/Minimal";
import { Mondrian } from "./presets/Mondrian";
import { Neon } from "./presets/Neon";
@@ -25,6 +26,7 @@ export const PRESET_CODE = {
Tile,
Drawing,
Halftone,
+ Layers,
Dots,
Minimal,
Blocks,
diff --git a/src/lib/presets/Blocks.ts b/src/lib/presets/Blocks.ts
index d7c307a..c8169e5 100644
--- a/src/lib/presets/Blocks.ts
+++ b/src/lib/presets/Blocks.ts
@@ -139,7 +139,7 @@ export function renderSVG(qr, params) {
if (
!visited(x + 1, y) &&
!visited(x + 2, y) &&
- !visited(x + 1, y + 1) &&
+ !visited(x, y + 1) &&
!visited(x + 2, y + 1)
) {
crossLayer += \`\`;
@@ -159,7 +159,7 @@ export function renderSVG(qr, params) {
x < matrixWidth - 1 &&
matrix(x + 1, y) & matrix(x, y + 1) & matrix(x + 1, y + 1) & 1
) {
- if (!visited(x + 1, y) && !visited(x + 1, y + 1)) {
+ if (!visited(x + 1, y) && !visited(x + 1, y + 1) && !visited(x, y + 1)) {
crossLayer += \`\`;
crossLayer += \`\`;
crossLayer += \`\`;
diff --git a/src/lib/presets/Layers.ts b/src/lib/presets/Layers.ts
new file mode 100644
index 0000000..1789384
--- /dev/null
+++ b/src/lib/presets/Layers.ts
@@ -0,0 +1,104 @@
+export const Layers = `export const paramsSchema = {
+ Margin: {
+ type: "number",
+ min: 0,
+ max: 10,
+ step: 0.1,
+ default: 2,
+ },
+ Background: {
+ type: "color",
+ default: "#163157",
+ },
+ // See browser compatibility issues here
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
+ "Mix blend mode": {
+ type: "select",
+ options: [
+ "normal",
+ "multiply",
+ "screen",
+ "overlay",
+ "darken",
+ "lighten",
+ "color-dodge",
+ "color-burn",
+ "hard-light",
+ "soft-light",
+ "difference",
+ "exclusion",
+ "hue",
+ "saturation",
+ "color",
+ "luminosity",
+ "plus-darker",
+ "plus-lighter",
+ ],
+ default: "difference",
+ },
+ Foreground: {
+ type: "array",
+ resizable: true,
+ props: {
+ type: "color",
+ },
+ default: ["#e80004", "#000000", "#ca70cf", "#000000", "#ffffff"],
+ },
+ "Offset x": {
+ type: "array",
+ resizable: true,
+ props: {
+ type: "number",
+ min: -1,
+ step: 0.1,
+ max: 1,
+ },
+ default: [0.6, 0.4, 0.2, 0, -0.2],
+ },
+ "Offset y": {
+ type: "array",
+ resizable: true,
+ props: {
+ type: "number",
+ min: -1,
+ step: 0.1,
+ max: 1,
+ },
+ default: [0.6, 0.4, 0.2, 0, -0.2],
+ },
+};
+
+export function renderSVG(qr, params) {
+ const matrixWidth = qr.version * 4 + 17;
+ const margin = params["Margin"];
+ const colors = params["Foreground"];
+ const offsetX = params["Offset x"];
+ const offsetY = params["Offset y"];
+ const bg = params["Background"];
+
+ const size = matrixWidth + 2 * margin;
+ let svg = \`\`;
+ return svg;
+}
+`