suaqred grid ux

public/csspageweaver/interface/css/panel.css

@@ -267,6 +267,10 @@
     justify-content: space-between;
 }
 
+#cssPageWeaver_panel .panel-group-values label{
+    font-size: 12px;
+}
+
 
 /* INPUT NUMBER ---------------------------------- */
 

public/csspageweaver/plugins/baseline/baseline.js

@@ -19,7 +19,7 @@ export default function baseline() {
 
     // set default value
     baseline.default = {
-        size: 32 ,
+        size: 20,
         position: 0
     }
 

public/csspageweaver/plugins/grid/config.json

@@ -3,8 +3,9 @@
 	"description": "",
 	"version": "1.0",
 	"ui": {
-		"title": "Grid",
+		"title": "Squared grid",
-		"description": "This Toogle a 12 columns grid",
+		"description": "This Toogle a squared grid",
+		"template": "template.html",
 		"toggle": true
 	},
 	"stylesheet": "grid.css",

public/csspageweaver/plugins/grid/grid-ui.js

@@ -8,21 +8,48 @@
 export default function gridEvents(){
     let body = cssPageWeaver.ui.body;
     let fileTitle = cssPageWeaver.docTitle;
+    let parameters = cssPageWeaver.features.grid.parameters || {};
+    let isParametersSet = Object.keys(parameters).length > 0;
 
     let grid = {};
 
-    // valeur par défaut → grille désactivée
+    // valeur par défaut
     grid.default = {
-        toggle: 'no-grid'
+        toggle: 'no-grid',
+        spacing: 56,
+        steps: 5,
+        positionX: 28,
+        positionY: 0
     };
 
     grid.toggle = {};
     grid.toggle.input = cssPageWeaver.ui.grid.toggleInput;
     grid.toggle.label = cssPageWeaver.ui.grid.toggleLabel;
 
+    grid.spacing = {};
+    grid.spacing.value = parameters.spacing || grid.default.spacing;
+    grid.spacing.input = document.querySelector('#spacing-grid');
+
+    grid.steps = {};
+    grid.steps.value = parameters.steps || grid.default.steps;
+    grid.steps.input = document.querySelector('#steps-grid');
+
+    grid.positionX = {};
+    grid.positionX.value = parameters.positionX || grid.default.positionX;
+    grid.positionX.input = document.querySelector('#position-x-grid');
+
+    grid.positionY = {};
+    grid.positionY.value = parameters.positionY || grid.default.positionY;
+    grid.positionY.input = document.querySelector('#position-y-grid');
+
     /* Récupération de la session précédente */
     grid.toggle.value = localStorage.getItem('gridToggle_' + fileTitle) || grid.default.toggle;
+    grid.spacing.value = localStorage.getItem('gridSpacing_' + fileTitle) || grid.spacing.value;
+    grid.steps.value = localStorage.getItem('gridSteps_' + fileTitle) || grid.steps.value;
+    grid.positionX.value = localStorage.getItem('gridPositionX_' + fileTitle) || grid.positionX.value;
+    grid.positionY.value = localStorage.getItem('gridPositionY_' + fileTitle) || grid.positionY.value;
 
+    /* DOM edit */
     if(grid.toggle.value === "grid"){
         body.classList.add('grid');  // on indique qu'il y a la grille
         grid.toggle.input.checked = true;
@@ -31,7 +58,22 @@ export default function gridEvents(){
         grid.toggle.input.checked = false;
     }
 
-    /* Événement toggle */
+    /* Set grid values on load */
+    grid.spacing.input.value = grid.spacing.value;
+    document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');
+
+    grid.steps.input.value = grid.steps.value;
+    document.documentElement.style.setProperty('--steps', grid.steps.value);
+
+    grid.positionX.input.value = grid.positionX.value;
+    document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
+
+    grid.positionY.input.value = grid.positionY.value;
+    document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
+
+    /* Event listeners */
+
+    /* Toggle event */
     grid.toggle.input.addEventListener("input", (e) => {
         if(e.target.checked){
             body.classList.add('grid');  // grille activée
@@ -41,5 +83,33 @@ export default function gridEvents(){
             localStorage.setItem('gridToggle_' + fileTitle, 'no-grid');
         }
     });
+
+    /* Change grid spacing on input */
+    document.querySelector("#spacing-grid").addEventListener("input", (e) => {
+        grid.spacing.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');
+        localStorage.setItem('gridSpacing_' + fileTitle, grid.spacing.value);
+    });
+
+    /* Change grid steps on input */
+    document.querySelector("#steps-grid").addEventListener("input", (e) => {
+        grid.steps.value = e.target.value;
+        document.documentElement.style.setProperty('--steps', grid.steps.value);
+        localStorage.setItem('gridSteps_' + fileTitle, grid.steps.value);
+    });
+
+    /* Change grid position X on input */
+    document.querySelector("#position-x-grid").addEventListener("input", (e) => {
+        grid.positionX.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
+        localStorage.setItem('gridPositionX_' + fileTitle, grid.positionX.value);
+    });
+
+    /* Change grid position Y on input */
+    document.querySelector("#position-y-grid").addEventListener("input", (e) => {
+        grid.positionY.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
+        localStorage.setItem('gridPositionY_' + fileTitle, grid.positionY.value);
+    });
 }
 

public/csspageweaver/plugins/grid/grid.css

@@ -1,61 +1,58 @@
+:root {
+    --grid-bold:  #bfbfbf;
+    --grid-light: #efefef;
+
+    --grid-spacing: 56px;
+    --steps: 5;
+    --grid-position-x: 28px;
+    --grid-position-y: 0px;
+
+    --grid-subdivisions: calc(var(--grid-spacing)/var(--steps));
+
+}
+
+
 @media screen{
 
 
-    /* .pagedjs_sheet{
-        --grid-bold: #888;
-        --grid-light: #cfcfcf;
-        background-color: #e5e5f7;
-        opacity: 0.8;
-        background-image:  linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px), linear-gradient(transparent 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, white 1px);
-
-        background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
-        background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-    } */
-
    
     body.grid .pagedjs_sheet {
 
 
-        --grid-bold:  #cfcfcf;
-        --grid-light: #efefef;
        
-        --bold-step: 56px;
+        z-index: -1;
-        --light-step: 14px; 
-        --shift-x: 28px;
     
-        background-color: white;
-        opacity: 0.8;
     
         background-image:
             /* Traits bold */
             repeating-linear-gradient(
                 90deg,
                 var(--grid-bold) 0 1px,
-                transparent 1px var(--bold-step)
+                transparent 1px var(--grid-spacing)
             ),
             repeating-linear-gradient(
                 0deg,
                 var(--grid-bold) 0 1px,
-                transparent 1px var(--bold-step)
+                transparent 1px var(--grid-spacing)
             ),
     
             /* Traits fins (3 traits → 4 carrés) */
             repeating-linear-gradient(
                 90deg,
                 var(--grid-light) 0 1px,
-                transparent 1px var(--light-step)
+                transparent 1px var(--grid-subdivisions)
             ),
             repeating-linear-gradient(
                 0deg,
                 var(--grid-light) 0 1px,
-                transparent 1px var(--light-step)
+                transparent 1px var(--grid-subdivisions)
             );
     
         background-position:
-            var(--shift-x) 0,
+            var(--grid-position-x) var(--grid-position-y),
-            var(--shift-x) 0,
+            var(--grid-position-x) var(--grid-position-y),
-            var(--shift-x) 0,
+            var(--grid-position-x) var(--grid-position-y),
-            var(--shift-x) 0;
+            var(--grid-position-x) var(--grid-position-y);
     }
     
     

public/csspageweaver/plugins/grid/template.html

@@ -0,0 +1,16 @@
+<div class="panel-group-values">
+    <label for="spacing-grid">Spacing (px)</label>
+    <input type="number" id="spacing-grid" name="spacing-grid" min="1"  max="200" value="56">
+</div>
+<div class="panel-group-values">
+    <label for="steps-grid">Steps</label>
+    <input type="number" id="steps-grid" name="steps-grid" min="1" max="20"  value="5">
+</div>
+<div class="panel-group-values">
+    <label for="position-x-grid">Position X (px)</label>
+    <input type="number" id="position-x-grid" name="position-x-grid"  value="28">
+</div>
+<div class="panel-group-values">
+    <label for="position-y-grid">Position Y (px)</label>
+    <input type="number" id="position-y-grid" name="position-y-grid"  value="0">
+</div>

static/csspageweaver/interface/css/panel.css

@@ -267,6 +267,10 @@
     justify-content: space-between;
 }
 
+#cssPageWeaver_panel .panel-group-values label{
+    font-size: 12px;
+}
+
 
 /* INPUT NUMBER ---------------------------------- */
 

static/csspageweaver/plugins/baseline/baseline.js

@@ -19,7 +19,7 @@ export default function baseline() {
 
     // set default value
     baseline.default = {
-        size: 32 ,
+        size: 20,
         position: 0
     }
 

static/csspageweaver/plugins/grid/config.json

@@ -3,8 +3,9 @@
 	"description": "",
 	"version": "1.0",
 	"ui": {
-		"title": "Grid",
+		"title": "Squared grid",
-		"description": "This Toogle a 12 columns grid",
+		"description": "This Toogle a squared grid",
+		"template": "template.html",
 		"toggle": true
 	},
 	"stylesheet": "grid.css",

static/csspageweaver/plugins/grid/grid-ui.js

@@ -8,21 +8,48 @@
 export default function gridEvents(){
     let body = cssPageWeaver.ui.body;
     let fileTitle = cssPageWeaver.docTitle;
+    let parameters = cssPageWeaver.features.grid.parameters || {};
+    let isParametersSet = Object.keys(parameters).length > 0;
 
     let grid = {};
 
-    // valeur par défaut → grille désactivée
+    // valeur par défaut
     grid.default = {
-        toggle: 'no-grid'
+        toggle: 'no-grid',
+        spacing: 56,
+        steps: 5,
+        positionX: 28,
+        positionY: 0
     };
 
     grid.toggle = {};
     grid.toggle.input = cssPageWeaver.ui.grid.toggleInput;
     grid.toggle.label = cssPageWeaver.ui.grid.toggleLabel;
 
+    grid.spacing = {};
+    grid.spacing.value = parameters.spacing || grid.default.spacing;
+    grid.spacing.input = document.querySelector('#spacing-grid');
+
+    grid.steps = {};
+    grid.steps.value = parameters.steps || grid.default.steps;
+    grid.steps.input = document.querySelector('#steps-grid');
+
+    grid.positionX = {};
+    grid.positionX.value = parameters.positionX || grid.default.positionX;
+    grid.positionX.input = document.querySelector('#position-x-grid');
+
+    grid.positionY = {};
+    grid.positionY.value = parameters.positionY || grid.default.positionY;
+    grid.positionY.input = document.querySelector('#position-y-grid');
+
     /* Récupération de la session précédente */
     grid.toggle.value = localStorage.getItem('gridToggle_' + fileTitle) || grid.default.toggle;
+    grid.spacing.value = localStorage.getItem('gridSpacing_' + fileTitle) || grid.spacing.value;
+    grid.steps.value = localStorage.getItem('gridSteps_' + fileTitle) || grid.steps.value;
+    grid.positionX.value = localStorage.getItem('gridPositionX_' + fileTitle) || grid.positionX.value;
+    grid.positionY.value = localStorage.getItem('gridPositionY_' + fileTitle) || grid.positionY.value;
 
+    /* DOM edit */
     if(grid.toggle.value === "grid"){
         body.classList.add('grid');  // on indique qu'il y a la grille
         grid.toggle.input.checked = true;
@@ -31,7 +58,22 @@ export default function gridEvents(){
         grid.toggle.input.checked = false;
     }
 
-    /* Événement toggle */
+    /* Set grid values on load */
+    grid.spacing.input.value = grid.spacing.value;
+    document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');
+
+    grid.steps.input.value = grid.steps.value;
+    document.documentElement.style.setProperty('--steps', grid.steps.value);
+
+    grid.positionX.input.value = grid.positionX.value;
+    document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
+
+    grid.positionY.input.value = grid.positionY.value;
+    document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
+
+    /* Event listeners */
+
+    /* Toggle event */
     grid.toggle.input.addEventListener("input", (e) => {
         if(e.target.checked){
             body.classList.add('grid');  // grille activée
@@ -41,5 +83,33 @@ export default function gridEvents(){
             localStorage.setItem('gridToggle_' + fileTitle, 'no-grid');
         }
     });
+
+    /* Change grid spacing on input */
+    document.querySelector("#spacing-grid").addEventListener("input", (e) => {
+        grid.spacing.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');
+        localStorage.setItem('gridSpacing_' + fileTitle, grid.spacing.value);
+    });
+
+    /* Change grid steps on input */
+    document.querySelector("#steps-grid").addEventListener("input", (e) => {
+        grid.steps.value = e.target.value;
+        document.documentElement.style.setProperty('--steps', grid.steps.value);
+        localStorage.setItem('gridSteps_' + fileTitle, grid.steps.value);
+    });
+
+    /* Change grid position X on input */
+    document.querySelector("#position-x-grid").addEventListener("input", (e) => {
+        grid.positionX.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
+        localStorage.setItem('gridPositionX_' + fileTitle, grid.positionX.value);
+    });
+
+    /* Change grid position Y on input */
+    document.querySelector("#position-y-grid").addEventListener("input", (e) => {
+        grid.positionY.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
+        localStorage.setItem('gridPositionY_' + fileTitle, grid.positionY.value);
+    });
 }
 

static/csspageweaver/plugins/grid/grid.css

@@ -1,61 +1,58 @@
+:root {
+    --grid-bold:  #bfbfbf;
+    --grid-light: #efefef;
+
+    --grid-spacing: 56px;
+    --steps: 5;
+    --grid-position-x: 28px;
+    --grid-position-y: 0px;
+
+    --grid-subdivisions: calc(var(--grid-spacing)/var(--steps));
+
+}
+
+
 @media screen{
 
 
-    /* .pagedjs_sheet{
-        --grid-bold: #888;
-        --grid-light: #cfcfcf;
-        background-color: #e5e5f7;
-        opacity: 0.8;
-        background-image:  linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px), linear-gradient(transparent 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, white 1px);
-
-        background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
-        background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-    } */
-
    
     body.grid .pagedjs_sheet {
 
 
-        --grid-bold:  #cfcfcf;
-        --grid-light: #efefef;
        
-        --bold-step: 56px;
+        z-index: -1;
-        --light-step: 14px; 
-        --shift-x: 28px;
     
-        background-color: white;
-        opacity: 0.8;
     
         background-image:
             /* Traits bold */
             repeating-linear-gradient(
                 90deg,
                 var(--grid-bold) 0 1px,
-                transparent 1px var(--bold-step)
+                transparent 1px var(--grid-spacing)
             ),
             repeating-linear-gradient(
                 0deg,
                 var(--grid-bold) 0 1px,
-                transparent 1px var(--bold-step)
+                transparent 1px var(--grid-spacing)
             ),
     
             /* Traits fins (3 traits → 4 carrés) */
             repeating-linear-gradient(
                 90deg,
                 var(--grid-light) 0 1px,
-                transparent 1px var(--light-step)
+                transparent 1px var(--grid-subdivisions)
             ),
             repeating-linear-gradient(
                 0deg,
                 var(--grid-light) 0 1px,
-                transparent 1px var(--light-step)
+                transparent 1px var(--grid-subdivisions)
             );
     
         background-position:
-            var(--shift-x) 0,
+            var(--grid-position-x) var(--grid-position-y),
-            var(--shift-x) 0,
+            var(--grid-position-x) var(--grid-position-y),
-            var(--shift-x) 0,
+            var(--grid-position-x) var(--grid-position-y),
-            var(--shift-x) 0;
+            var(--grid-position-x) var(--grid-position-y);
     }
     
     

static/csspageweaver/plugins/grid/template.html

@@ -0,0 +1,16 @@
+<div class="panel-group-values">
+    <label for="spacing-grid">Spacing (px)</label>
+    <input type="number" id="spacing-grid" name="spacing-grid" min="1"  max="200" value="56">
+</div>
+<div class="panel-group-values">
+    <label for="steps-grid">Steps</label>
+    <input type="number" id="steps-grid" name="steps-grid" min="1" max="20"  value="5">
+</div>
+<div class="panel-group-values">
+    <label for="position-x-grid">Position X (px)</label>
+    <input type="number" id="position-x-grid" name="position-x-grid"  value="28">
+</div>
+<div class="panel-group-values">
+    <label for="position-y-grid">Position Y (px)</label>
+    <input type="number" id="position-y-grid" name="position-y-grid"  value="0">
+</div>