bug fixes

Author: Templarian

package-lock.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "@pictogrammers/components",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.4.4",
   "license": "MIT",
   "author": "Austin Andrews",
   "scripts": {
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@pictogrammers/element": "0.0.67",
     "@pictogrammers/element-jest": "^0.1.10",
-    "@pictogrammers/element-webpack": "^0.1.55",
+    "@pictogrammers/element-webpack": "^0.1.56",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",

package.json

@@ -61,7 +61,7 @@
   max-width: 20rem;
 }
 
-slot[name=main] {
+[part=main] {
   display: flex;
   flex-direction: column;
   grid-column: 3;

src/pg/app/app.css

@@ -9,7 +9,9 @@
     <slot name="side"></slot>
   </div>
   <button part="resize"></button>
-  <slot name="main"></slot>
+  <div part="main">
+    <slot name="main"></slot>
+  </div>
   <div part="home" class="hide">
     <slot name="home"></slot>
   </div>

src/pg/app/app.html

@@ -30,7 +30,7 @@
   position: relative;
 }
 
-[part="button"]:focus {
+[part="button"]:focus-visible {
   position: relative;
 }
 
@@ -44,7 +44,7 @@
   border-radius: var(--pg-button-border-radius, 0.25rem);
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
-[part="button"]:focus::before {
+[part="button"]:focus-visible::before {
   pointer-events: none;
   content: '';
   position: absolute;

src/pg/button/button.css

@@ -435,7 +435,6 @@ export default class PgInputPixelEditor extends HTMLElement {
     switch (this.#inputMode) {
       case InputMode.Pixel:
         this.#setPixel(newX, newY, color);
-        this.#data[this.#layer][newY][newX] = color;
         break;
     }
     console.log(this.#inputMode, newX, newY);
@@ -562,7 +561,6 @@ export default class PgInputPixelEditor extends HTMLElement {
         case InputMode.Pixel:
           for (var point of points) {
             this.#setPixel(point[0], point[1], color);
-            data[this.#layer][point[1]][point[0]] = color;
           }
           break;
         case InputMode.Line:

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -0,0 +1,5 @@
+import PgTree from './tree';
+
+export { SelectedTreeItem } from './tree';
+
+export default PgTree;

src/pg/tree/index.ts

@@ -18,6 +18,7 @@
   font-family: var(--pg-font-family);
   font-size: var(--pg-tree-item-font-size, 1rem);
 }
+
 [part=labelButton] {
   display: flex;
   background: transparent;
@@ -29,7 +30,13 @@
   font-family: var(--pg-font-family);
   font-size: var(--pg-tree-item-font-size, 1rem);
   margin: -0.25rem -0.25rem -0.25rem -0.25rem;
-  padding: 0 0.75rem 0 0.25rem;
+  padding: 0 0.25rem 0 0.25rem;
+}
+
+[part=label] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 [part=input] {
@@ -58,7 +65,7 @@
 }
 
 [part=item] {
-  grid-template-columns: min-content min-content auto min-content;
+  grid-template-columns: min-content min-content minmax(0, 1fr) min-content;
   grid-template-rows: auto;
 }
 [part=item] [part=selected] {

src/pg/treeItem/treeItem.css

@@ -40,6 +40,9 @@ export default config({
       }
     }
   },
+  update: (files) => {
+    console.log(files);
+  },
   after: (components, args, mode) => {
     // Nothing
   }