Merge pull request #12 from adsaf123/main

Merge grid rows and retain soft edges

package-lock.json

@@ -11,8 +11,12 @@
         "@fontsource/material-icons": "^4.5.4",
         "@fontsource/roboto-mono": "^4.5.8",
         "@pixi/app": "~6.3.2",
+        "@pixi/constants": "~6.3.2",
         "@pixi/core": "~6.3.2",
-        "@pixi/particle-emitter": "^5.0.4",
+        "@pixi/display": "~6.3.2",
+        "@pixi/math": "~6.3.2",
+        "@pixi/particle-emitter": "^5.0.7",
+        "@pixi/sprite": "~6.3.2",
         "@pixi/ticker": "~6.3.2",
         "@vitejs/plugin-vue": "^2.3.3",
         "@vitejs/plugin-vue-jsx": "^1.3.10",
@@ -24,7 +28,7 @@
         "vite-tsconfig-paths": "^3.5.0",
         "vue": "^3.2.26",
         "vue-next-select": "^2.10.2",
-        "vue-panzoom": "^1.1.6",
+        "vue-panzoom": "https://github.com/thepaperpilot/vue-panzoom.git",
         "vue-textarea-autosize": "^1.1.1",
         "vue-toastification": "^2.0.0-rc.1",
         "vue-transition-expand": "^0.1.0",
@@ -1818,8 +1822,7 @@
     "node_modules/@pixi/constants": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-6.3.2.tgz",
-      "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg==",
+      "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg=="
-      "peer": true
     },
     "node_modules/@pixi/core": {
       "version": "6.3.2",
@@ -1845,7 +1848,6 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/display/-/display-6.3.2.tgz",
       "integrity": "sha512-D+WiM0BcyPK91RYxl7TXXVNz/5lOGs8Q6jtCMcWgTHwCXxWPOHFnNZ4KPJZpUQ7me8Tl2u+c9hfB5Oh1+17r/Q==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/math": "6.3.2",
         "@pixi/settings": "6.3.2",
@@ -1855,8 +1857,7 @@
     "node_modules/@pixi/math": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/math/-/math-6.3.2.tgz",
-      "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw==",
+      "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw=="
-      "peer": true
     },
     "node_modules/@pixi/particle-emitter": {
       "version": "5.0.7",
@@ -1890,7 +1891,6 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-6.3.2.tgz",
       "integrity": "sha512-T1KJ8l2f8Otn6Se6h4b2pz2nrUSe59Pnmj2WIzgBisM245h7dGATs05MisMaLV6Lg/3gTBTxsLBmKsbDSQqbNw==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/constants": "6.3.2",
         "@pixi/core": "6.3.2",
@@ -6726,8 +6726,8 @@
     },
     "node_modules/vue-panzoom": {
       "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/vue-panzoom/-/vue-panzoom-1.1.6.tgz",
+      "resolved": "git+ssh://git@github.com/thepaperpilot/vue-panzoom.git#fa3cc91f6842cdfbd1bfb433c75cac01f177fe2d",
-      "integrity": "sha512-yEE60C/gnc5NGL6YBD++CErD820va7fkBJE5dCWZZzXX2aMGklj/UKmtqu1u5xDkuOIjnGUr412LNHwOOE711w==",
+      "license": "MIT",
       "dependencies": {
         "panzoom": "^9.4.1"
       }
@@ -8442,8 +8442,7 @@
     "@pixi/constants": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-6.3.2.tgz",
-      "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg==",
+      "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg=="
-      "peer": true
     },
     "@pixi/core": {
       "version": "6.3.2",
@@ -8457,14 +8456,12 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/display/-/display-6.3.2.tgz",
       "integrity": "sha512-D+WiM0BcyPK91RYxl7TXXVNz/5lOGs8Q6jtCMcWgTHwCXxWPOHFnNZ4KPJZpUQ7me8Tl2u+c9hfB5Oh1+17r/Q==",
-      "peer": true,
       "requires": {}
     },
     "@pixi/math": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/math/-/math-6.3.2.tgz",
-      "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw==",
+      "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw=="
-      "peer": true
     },
     "@pixi/particle-emitter": {
       "version": "5.0.7",
@@ -8491,7 +8488,6 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-6.3.2.tgz",
       "integrity": "sha512-T1KJ8l2f8Otn6Se6h4b2pz2nrUSe59Pnmj2WIzgBisM245h7dGATs05MisMaLV6Lg/3gTBTxsLBmKsbDSQqbNw==",
-      "peer": true,
       "requires": {}
     },
     "@pixi/ticker": {
@@ -11866,9 +11862,8 @@
       "requires": {}
     },
     "vue-panzoom": {
-      "version": "1.1.6",
+      "version": "git+ssh://git@github.com/thepaperpilot/vue-panzoom.git#fa3cc91f6842cdfbd1bfb433c75cac01f177fe2d",
-      "resolved": "https://registry.npmjs.org/vue-panzoom/-/vue-panzoom-1.1.6.tgz",
+      "from": "vue-panzoom@https://github.com/thepaperpilot/vue-panzoom.git",
-      "integrity": "sha512-yEE60C/gnc5NGL6YBD++CErD820va7fkBJE5dCWZZzXX2aMGklj/UKmtqu1u5xDkuOIjnGUr412LNHwOOE711w==",
       "requires": {
         "panzoom": "^9.4.1"
       }

src/components/common/table.css

@@ -56,6 +56,43 @@
     border-radius: var(--border-radius);
 }
 
+.row-grid.mergeAdjacent > .feature:not(.dontMerge),
+.row-grid.mergeAdjacent > .tooltip-container > .feature:not(.dontMerge) {
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    border-radius: 0;
+}
+
+.row-grid.mergeAdjacent > .feature:not(.dontMerge):last-child,
+.row-grid.mergeAdjacent > .tooltip-container:last-child > .feature:not(.dontMerge) {
+    border-radius: 0 0 0 0;
+}
+
+
+.row-grid.mergeAdjacent > .feature:not(.dontMerge):first-child,
+.row-grid.mergeAdjacent > .tooltip-container:first-child > .feature:not(.dontMerge) {
+    border-radius: 0 0 0 0;
+}
+
+.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):first-child {
+    border-radius: 0 0 0 var(--border-radius);
+}
+
+.table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):last-child {
+    border-radius: 0 var(--border-radius) 0 0;
+}
+
+.table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):first-child {
+    border-radius: var(--border-radius) 0 0 0;
+}
+
+.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):last-child {
+    border-radius: 0 0 var(--border-radius) 0;
+}
+
+
 /*
 TODO how to implement mergeAdjacent for grids?
 .row.mergeAdjacent + .row.mergeAdjacent > .feature:not(.dontMerge) {

src/features/grids/Grid.vue

@@ -4,9 +4,9 @@
         :style="{
             visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
         }"
-        class="table"
+        class="table-grid"
     >
-        <div v-for="row in unref(rows)" class="row" :class="{ mergeAdjacent }" :key="row">
+        <div v-for="row in unref(rows)" class="row-grid" :class="{ mergeAdjacent }" :key="row">
             <GridCell
                 v-for="col in unref(cols)"
                 :key="col"