refactor(devtools): remove broken copy to clipboard feature

2026-09-14 13:54:52 +08:00 · 2020-03-31 01:18:51 -04:00
parent 85e01af432
commit 879ce4562e
11 changed files with 7 additions and 72 deletions
@@ -13,11 +13,7 @@
  </as-split-area>
  <as-split-area size="40" minSize="25">
    <div class="property-tab-wrapper">
-      <ng-property-tab
-        [currentSelectedElement]="currentSelectedElement"
-        (viewSource)="viewSource()"
-        (copyPropData)="copyPropData($event)"
-      ></ng-property-tab>
+      <ng-property-tab [currentSelectedElement]="currentSelectedElement" (viewSource)="viewSource()"></ng-property-tab>
    </div>
  </as-split-area>
 </as-split>
@@ -6,13 +6,11 @@ import {
  ComponentExplorerViewQuery,
  ComponentExplorerView,
  ElementPosition,
-  Descriptor,
  PropertyQuery,
  PropertyQueryTypes,
 } from 'protocol';
 import { IndexedNode } from './directive-forest/index-forest';
 import { ApplicationOperations } from '../../application-operations';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { Subject } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 import { ElementPropertyResolver } from './property-resolver/element-property-resolver';
@@ -60,7 +58,6 @@ export class DirectiveExplorerComponent implements OnInit {

  constructor(
    private _appOperations: ApplicationOperations,
-    private _snackBar: MatSnackBar,
    private _messageBus: MessageBus<Events>,
    private _propResolver: ElementPropertyResolver
  ) {
@@ -159,27 +156,6 @@ export class DirectiveExplorerComponent implements OnInit {
    };
  }

-  copyPropData(directive: string): void {
-    const handler = (e: ClipboardEvent) => {
-      let data = {};
-      const controller = this._propResolver.getDirectiveController(directive);
-      if (controller) {
-        data = controller.directiveProperties;
-      }
-      if (!e.clipboardData) {
-        return;
-      }
-      e.clipboardData.setData('text/plain', JSON.stringify(cleanPropDataForCopying(data)));
-      e.preventDefault();
-      document.removeEventListener('copy', handler);
-      this._snackBar.open('Copied to clipboard!', '', {
-        duration: 1000,
-      });
-    };
-    document.addEventListener('copy', handler);
-    document.execCommand('copy');
-  }
-
  handleHighlightFromComponent(position: ElementPosition): void {
    this._messageBus.emit('highlightElementFromComponentTree', [position]);
  }
@@ -209,15 +185,3 @@ export class DirectiveExplorerComponent implements OnInit {
    this.parents = parents;
  }
 }
-
-const cleanPropDataForCopying = (propData: { [name: string]: Descriptor }, cleanedPropData = {}): object => {
-  Object.keys(propData).forEach((key) => {
-    if (typeof propData[key].value === 'object') {
-      cleanedPropData[key] = {};
-      cleanPropDataForCopying(propData[key].value, cleanedPropData[key]);
-    } else {
-      cleanedPropData[key] = propData[key].value || propData[key].preview;
-    }
-  });
-  return cleanedPropData;
-};
@@ -8,15 +8,12 @@ describe('DirectiveExplorerComponent', () => {
  let messageBusMock: any;
  let comp: DirectiveExplorerComponent;
  let applicationOperationsSpy: any;
-  let snackBarSpy: any;

  beforeEach(() => {
    applicationOperationsSpy = jasmine.createSpyObj('_appOperations', ['viewSource', 'selectDomElement']);
-    snackBarSpy = jasmine.createSpyObj('_snackBar', ['show']);
    messageBusMock = jasmine.createSpyObj('messageBus', ['on', 'once', 'emit', 'destroy']);
    comp = new DirectiveExplorerComponent(
      applicationOperationsSpy,
-      snackBarSpy,
      messageBusMock,
      new ElementPropertyResolver(messageBusMock)
    );
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { IndexedNode } from '../../directive-forest/index-forest';

@Component({
@@ -8,7 +8,6 @@ import { IndexedNode } from '../../directive-forest/index-forest';
 })
 export class PropertyTabBodyComponent {
  @Input() currentSelectedElement: IndexedNode | null;
-  @Output() copyPropData = new EventEmitter<string>();

  getCurrentDirectives(): string[] | undefined {
    if (!this.currentSelectedElement) {
@@ -1,18 +1,3 @@
 <header>
  <span> Properties of {{ directive }} </span>
-  <button mat-icon-button (click)="copyPropData.emit(directive)">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      aria-hidden="true"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      viewBox="0 0 8 8"
-    >
-      <path
-        d="M3.5 0c-.28 0-.5.22-.5.5V1h-.75c-.14 0-.25.11-.25.25V2h3v-.75C5 1.11 4.89 1 4.75 1H4V.5c0-.28-.22-.5-.5-.5zM.25 1C.11 1 0 1.11 0 1.25v6.5c0 .14.11.25.25.25h6.5c.14 0 .25-.11.25-.25v-6.5C7 1.11 6.89 1 6.75 1H6v2H1V1H.25z"
-        fill="#626262"
-      />
-    </svg>
-  </button>
 </header>
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';

@Component({
  selector: 'ng-property-view-header',
@@ -7,5 +7,4 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class PropertyViewHeaderComponent {
  @Input() directive: string;
-  @Output() copyPropData = new EventEmitter<string>();
 }
@@ -1,4 +1,4 @@
-<ng-property-view-header [directive]="directive" (copyPropData)="copyPropData.emit($event)"> </ng-property-view-header>
+<ng-property-view-header [directive]="directive"></ng-property-view-header>
 <ng-property-view-body
  [controller]="controller"
  [directiveInputControls]="directiveInputControls"
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { DirectivePropertyResolver, DirectiveTreeData } from '../../../property-resolver/directive-property-resolver';
 import { ElementPropertyResolver } from '../../../property-resolver/element-property-resolver';

@@ -9,7 +9,6 @@ import { ElementPropertyResolver } from '../../../property-resolver/element-prop
 })
 export class PropertyViewComponent {
  @Input() directive: string;
-  @Output() copyPropData = new EventEmitter<string>();

  constructor(private _nestedProps: ElementPropertyResolver) {}

@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 import { MatTreeModule } from '@angular/material/tree';
 import { PropertyViewHeaderComponent } from './property-view-header/property-view-header.component';
 import { PropertyViewComponent } from './property-view.component';
-import { MatButtonModule } from '@angular/material/button';
 import { PropertyViewTreeComponent } from './property-view-body/property-view-tree/property-view-tree.component';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -19,7 +18,7 @@ import { FormsModule } from '@angular/forms';
    PropertyViewTreeComponent,
    PropertyEditorComponent,
  ],
-  imports: [MatTreeModule, CommonModule, MatButtonModule, MatExpansionModule, DragDropModule, FormsModule],
+  imports: [MatTreeModule, CommonModule, MatExpansionModule, DragDropModule, FormsModule],
  exports: [PropertyViewBodyComponent, PropertyViewHeaderComponent, PropertyViewComponent],
 })
 export class PropertyViewModule {}
@@ -1,4 +1,3 @@
 <ng-property-tab-header [currentSelectedElement]="currentSelectedElement" (viewSource)="viewSource.emit()">
 </ng-property-tab-header>
-<ng-property-tab-body [currentSelectedElement]="currentSelectedElement" (copyPropData)="copyPropData.emit($event)">
-</ng-property-tab-body>
+<ng-property-tab-body [currentSelectedElement]="currentSelectedElement"> </ng-property-tab-body>
@@ -8,9 +8,7 @@ import { PropertyTabBodyComponent } from './property-tab-body/property-tab-body.
 })
 export class PropertyTabComponent {
  @Input() currentSelectedElement: IndexedNode;
-
  @Output() viewSource = new EventEmitter<void>();
-  @Output() copyPropData = new EventEmitter<string>();

  @ViewChild(PropertyTabBodyComponent) propertyTabBody: PropertyTabBodyComponent;
 }