feat: map chart structure

apps/map-chart/package.json

@@ -13,7 +13,7 @@
     "test:watch": "jest --watch",
     "test:ci": "npm run validate && jest",
     "serve": "webpack serve --mode=development",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6007",
     "build": "npm run build:clean && npm run build:prod && npm run build:minify && npm run build:esm",
     "build:clean": "rm -rf ./dist",
     "build:prod": "webpack --mode=production",
@@ -30,5 +30,12 @@
     "dist",
     "types"
   ],
-  "homepage": "https://ui.toast.com"
+  "homepage": "https://ui.toast.com",
+  "dependencies": {
+    "d3-geo": "^2.0.1",
+    "topojson-client": "^3.1.0"
+  },
+  "devDependencies": {
+    "@types/d3-geo": "^2.0.0"
+  }
 }

apps/map-chart/src/brushes/geoFeature.ts

@@ -0,0 +1,26 @@
+import { GeoPath } from 'd3-geo';
+import { setSize } from '@src/helpers/painter';
+import { GeoFeatureModel } from '@t/components/geoFeature';
+
+export function geoFeature(ctx: CanvasRenderingContext2D, gp: GeoPath, model: GeoFeatureModel) {
+  const { feature, color } = model;
+  const areaCanvas = document.createElement('canvas');
+  const areaCtx = areaCanvas.getContext('2d')!;
+  const [[x, y], [x2, y2]] = gp.bounds(feature);
+  const width = Math.max(x2 - x, 1);
+  const height = Math.max(y2 - y, 1);
+  setSize(areaCanvas, areaCtx, width, height);
+
+  areaCtx.beginPath();
+  areaCtx.translate(-x, -y);
+
+  gp.context(areaCtx)(feature);
+
+  areaCtx.lineWidth = 1;
+  areaCtx.fillStyle = color;
+
+  areaCtx.fill();
+  areaCtx.stroke();
+
+  ctx.drawImage(areaCanvas, x, y, width, height);
+}

apps/map-chart/src/chart.ts

@@ -0,0 +1,127 @@
+import Store from './store/store';
+import * as outlineBrush from './brushes/geoFeature';
+import { debounce, EventEmitter } from '@toast-ui/shared';
+import { ChartProps } from '@t/store';
+import Painter from '@src/painter';
+import GeoFeature from '@src/component/geoFeature';
+import ComponentManager from '@src/component/componentManager';
+import { responderDetectors } from '@src/responderDetectors';
+
+import root from '@src/store/root';
+import theme from '@src/store/theme';
+import series from '@src/store/series';
+import layout from '@src/store/layout';
+
+export default class MapChart {
+  store!: Store;
+
+  readonly componentManager: ComponentManager;
+
+  readonly containerEl: HTMLElement;
+
+  el: HTMLDivElement;
+
+  ctx!: CanvasRenderingContext2D;
+
+  painter = new Painter(this);
+
+  readonly eventBus: EventEmitter = new EventEmitter();
+
+  constructor(props: ChartProps) {
+    const { el, options } = props;
+
+    this.containerEl = el;
+    this.el = this.createChartWrapper();
+    this.containerEl.appendChild(this.el);
+    this.store = new Store({ options });
+    this.componentManager = new ComponentManager({
+      store: this.store,
+      eventBus: this.eventBus,
+    });
+    this.eventBus.on(
+      'needDraw',
+      debounce(() => this.draw(), 10)
+    );
+    this.initialize();
+    this.store.observe(() => this.painter.setup());
+
+    // @TODO need to be called from animator
+    this.draw();
+  }
+
+  createChartWrapper() {
+    const el = document.createElement('div');
+    el.classList.add('toastui-map-chart-wrapper');
+
+    return el;
+  }
+
+  draw() {
+    this.painter.beforeFrame();
+
+    this.componentManager.forEach((component) => {
+      if (!component.isShow) {
+        return;
+      }
+
+      this.painter.beforeDraw(component.rect.x, component.rect.y);
+      if (component.beforeDraw) {
+        component.beforeDraw(this.painter);
+      }
+
+      component.draw(this.painter);
+      this.painter.afterDraw();
+    });
+  }
+
+  handleEvent(event: MouseEvent) {
+    const { clientX, clientY, type: eventType } = event;
+
+    const delegationMethod = `on${eventType[0].toUpperCase() + eventType.substring(1)}`;
+
+    const canvas = this.painter.ctx.canvas;
+    const canvasRect = canvas.getBoundingClientRect();
+    // Calculate scale for chart affected by a CSS transform.
+    const scaleX = canvasRect.width / canvas.offsetWidth;
+    const scaleY = canvasRect.height / canvas.offsetHeight;
+
+    const mousePosition = {
+      x: (clientX - canvasRect.left) / scaleX,
+      y: (clientY - canvasRect.top) / scaleY,
+    };
+
+    this.componentManager.forEach((component) => {
+      if (!component[delegationMethod]) {
+        return;
+      }
+
+      if (!responderDetectors.rect({ mousePosition, model: component.rect })) {
+        return;
+      }
+
+      const detected = (component.responders || []).filter((model) => {
+        return responderDetectors[model.responderType]({
+          mousePosition,
+          model,
+          componentRect: component.rect,
+          projection: this.painter.projection,
+        });
+      });
+
+      component[delegationMethod]({ mousePosition, responders: detected }, event);
+    });
+  }
+
+  protected initStore() {
+    [root, theme, series, layout].forEach((module) => this.store.setModule(module));
+  }
+
+  protected initialize() {
+    this.initStore();
+    this.store.dispatch('initChartSize', this.containerEl);
+
+    this.componentManager.add(GeoFeature);
+
+    this.painter.addGroups([outlineBrush]);
+  }
+}

apps/map-chart/src/component/component.ts

@@ -0,0 +1,68 @@
+import { ChartState, Rect } from '@t/store';
+import Store from '@src/store/store';
+import Painter from '@src/painter';
+import { EventEmitter } from '@toast-ui/shared';
+import { ResponderModel } from '@t/responders';
+import { GeoFeatureModel } from '@t/components/geoFeature';
+
+export type ComponentType = 'component' | 'geoFeature';
+type ComponentModels = GeoFeatureModel[];
+
+export default abstract class Component {
+  name = 'Component';
+
+  type: ComponentType = 'component';
+
+  rect: Rect = {
+    x: 0,
+    y: 0,
+    height: 0,
+    width: 0,
+  };
+
+  isShow = true;
+
+  store: Store;
+
+  eventBus: EventEmitter;
+
+  models!: ComponentModels;
+
+  drawModels!: ComponentModels;
+
+  responders!: ResponderModel[];
+
+  constructor({ store, eventBus }: { store: Store; eventBus: EventEmitter }) {
+    this.store = store;
+    this.eventBus = eventBus;
+  }
+
+  abstract initialize(args: any): void;
+
+  abstract render(state: ChartState, computed: Record<string, any>): void;
+
+  beforeDraw?(painter: Painter): void;
+
+  onClick?(responseData: any): void;
+
+  onMousemove?(responseData: any): void;
+
+  onMouseenterComponent?(): void;
+
+  onMouseoutComponent?(): void;
+
+  onMousedown?(responseData: any): void;
+
+  onMouseup?(responseData: any): void;
+
+  draw(painter: Painter) {
+    const models = this.drawModels ? this.drawModels : this.models;
+    if (Array.isArray(models)) {
+      painter.paintForEach(models);
+    } else if (models) {
+      Object.keys(models).forEach((item) => {
+        painter.paintForEach(models[item]);
+      });
+    }
+  }
+}