Возникли проблемы при реализации шаблона проектирования Command с использованием служб и компонентов [Начинающий Angular] - PullRequest
Новая
       33

Возникли проблемы при реализации шаблона проектирования Command с использованием служб и компонентов [Начинающий Angular]

0 голосов
/ 18 января 2020

Задача - создать боковую панель инструментов для веб-приложения рисования. Я впервые использую Angular2 +, и я подумал, что было бы неплохо внедрить шаблон команд сразу, чтобы избежать повторного рефакторинга в дальнейшем.

Проблема в том, что я не уверен, как go об этом:

Пока я положил свои "инструменты" (то есть: ручки, карандаши, paintbru sh et c .) в отдельных классах (представляющих конкретные команды): 

import { ToolService } from './tool.service';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})

export class PencilToolService implements ToolService {
  private imgClass:string = "fas fa-pencil-alt";

  constructor() {
  }

  execute():void {
    //TODO: add pencil logic
  }

  getImgClass():string{
    return this.imgClass;
  }
}

все инструменты реализуют интерфейс Tool-Service, который должен представлять интерфейс «Command» 

  export interface ToolService {
  execute():void;
}

затем я сделал Invoker, который забирает все 

import { PaintBrushToolService } from './../tool-selector/tools/paintbrush-tool.service';
import { PencilToolService } from './../tool-selector/tools/pencil-tool.service';
import { ToolService } from './tools/tool.service';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ToolInvokerService {
  selectedTool:ToolService;
  tools: ToolService[];

  constructor(private toolService:ToolService) {
    this.selectedTool = toolService;
    //Maybe remove from constructor
  }

  setToolService(toolService: ToolService):void {
    this.selectedTool = toolService;
  }

  getSelectedTool():ToolService {
    return this.selectedTool;
  }

  executeToolService(){
    this.selectedTool.execute();
  }

  getToolList():ToolService[] {
    return this.tools;
  }
}

Теперь я застрял здесь. Я должен добавить приемник, который в этом случае я не совсем уверен, что (сама панель инструментов?).

для справки, вот код панели инструментов: 

import { ToolService } from './../../../services/toolbar/tool-selector/tools/tool.service';
import { PaintBrushToolService } from './../../../services/toolbar/tool-selector/tools/paintbrush-tool.service';
import { PencilToolService } from './../../../services/toolbar/tool-selector/tools/pencil-tool.service';
import { ToolInvokerService } from './../../../services/toolbar/tool-selector/tool-invoker.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tool-selector',
  templateUrl: './tool-selector.component.html',
  styleUrls: ['./tool-selector.component.scss']
})

export class ToolSelectorComponent implements OnInit {
  tools:ToolService[];

  constructor(private toolInvoker:ToolInvokerService,
              private pencil:PencilToolService, 
              private paintBrush:PaintBrushToolService) {
    this.tools = [this.pencil, this.paintBrush];
  }

  ngOnInit() {
  }

}

Кроме того, каков в этом случае мой класс редактора?

Примечание. Я основываюсь на этой диаграмме классов: https://refactoring.guru/design-patterns/command

Примечание 2: очень похожее веб-приложение - sketch.io

...