feat(elements): delete node

liriliri · Dec 19, 2022 · 25c75bf · 25c75bf
1 parent e7a0127
commit 25c75bf
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -65,7 +65,7 @@
     "licia": "^1.37.0",
     "luna-console": "^1.2.0",
     "luna-data-grid": "^0.3.2",
-    "luna-dom-viewer": "^1.1.1",
+    "luna-dom-viewer": "^1.1.2",
     "luna-modal": "^1.0.0",
     "luna-notification": "^0.1.4",
     "luna-object-viewer": "^0.2.4",

diff --git a/src/Elements/Elements.js b/src/Elements/Elements.js
@@ -9,7 +9,7 @@ import toNum from 'licia/toNum'
 import copy from 'licia/copy'
 import isMobile from 'licia/isMobile'
 import LunaDomViewer from 'luna-dom-viewer'
-import { isErudaEl, classPrefix as c } from '../lib/util'
+import { isErudaEl, classPrefix as c, isChobitsuEl } from '../lib/util'
 import evalCss from '../lib/evalCss'
 import Detail from './Detail'
 import chobitsu from '../lib/chobitsu'
@@ -39,7 +39,7 @@ export default class Elements extends Tool {
     this.config = this._detail.config
     this._domViewer = new LunaDomViewer(this._$domViewer.get(0), {
       node: this._htmlEl,
-      ignore: (node) => isErudaEl(node),
+      ignore: (node) => isErudaEl(node) || isChobitsuEl(node),
     })
     this._domViewer.expand()
     this._bindEvent()
@@ -77,17 +77,22 @@ export default class Elements extends Tool {
     const $control = this._$control
     const $showDetail = $control.find(c('.show-detail'))
     const $copyNode = $control.find(c('.copy-node'))
+    const $deleteNode = $control.find(c('.delete-node'))
     const iconDisabled = c('icon-disabled')
 
     $showDetail.addClass(iconDisabled)
     $copyNode.addClass(iconDisabled)
+    $deleteNode.addClass(iconDisabled)
 
     const node = this._curNode
 
     if (!node) {
       return
     }
 
+    if (node !== document.documentElement && node !== document.body) {
+      $deleteNode.rmClass(iconDisabled)
+    }
     $copyNode.rmClass(iconDisabled)
 
     if (node.nodeType === Node.ELEMENT_NODE) {
@@ -102,6 +107,7 @@ export default class Elements extends Tool {
         <span class="icon icon-select select"></span>
         <span class="icon icon-eye show-detail"></span>
         <span class="icon icon-copy copy-node"></span>
+        <span class="icon icon-delete delete-node"></span>
       </div>
       <div class="dom-viewer-container">
         <div class="dom-viewer"></div>
@@ -157,13 +163,23 @@ export default class Elements extends Tool {
       .on('click', c('.select'), this._toggleSelect)
       .on('click', c('.show-detail'), () => this._detail.show(this._curNode))
       .on('click', c('.copy-node'), this._copyNode)
+      .on('click', c('.delete-node'), this._deleteNode)
 
     this._domViewer.on('select', this._setNode)
 
     chobitsu
       .domain('Overlay')
       .on('inspectNodeRequested', this._inspectNodeRequested)
   }
+  _deleteNode = () => {
+    const node = this._curNode
+
+    if (node.parentNode) {
+      node.parentNode.removeChild(node)
+    }
+
+    this._back()
+  }
   _copyNode = () => {
     const node = this._curNode
 

diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss
@@ -14,6 +14,9 @@
     .icon-copy {
       right: 23px;
     }
+    .icon-delete {
+      right: 46px;
+    }
   }
   .dom-viewer-container {
     @include overflow-auto(y);

diff --git a/src/lib/util.js b/src/lib/util.js
@@ -211,6 +211,21 @@ export function isErudaEl(el) {
   return false
 }
 
+export function isChobitsuEl(el) {
+  while (el) {
+    let className = ''
+    if (el.getAttribute) {
+      className = el.getAttribute('class') || ''
+    }
+    if (contain(className, '__chobitsu-hide__')) {
+      return true
+    }
+    el = el.parentNode
+  }
+
+  return false
+}
+
 export const evalCss = evalCssUtil
 
 export function classPrefix(str) {

diff --git a/src/style/luna.scss b/src/style/luna.scss
@@ -222,8 +222,22 @@
   .luna-dom-viewer-html-comment {
     color: var(--comment-color);
   }
-  .luna-dom-viewer-selection {
-    background: var(--highlight);
+  .luna-dom-viewer-tree-item {
+    &:hover {
+      .luna-dom-viewer-selection {
+        background: var(--contrast);
+      }
+    }
+    &.luna-dom-viewer-selected {
+      .luna-dom-viewer-selection {
+        background: var(--highlight);
+      }
+    }
+    &.luna-dom-viewer-selected:focus {
+      .luna-dom-viewer-selection {
+        background: var(--contrast);
+      }
+    }
   }
   .luna-dom-viewer-text-node {
     .luna-dom-viewer-key {

diff --git a/test/style.css b/test/style.css
@@ -1,9 +1,6 @@
 body, html {
     padding: 0;
     margin: 0;
-}
-
-* {
     font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
 }