Merged PR 200: Implement the Canvas API rather than using SVG

src/Components/Canvas/Selector.ts

@@ -0,0 +1,57 @@
+import { IContainerModel } from '../../Interfaces/IContainerModel';
+import { SHOW_SELECTOR_TEXT } from '../../utils/default';
+import { GetAbsolutePosition } from '../../utils/itertools';
+import { RemoveMargin } from '../../utils/svg';
+
+interface ISelectorProps {
+  selected?: IContainerModel
+  scale?: number
+}
+
+export function RenderSelector(ctx: CanvasRenderingContext2D, frameCount: number, props: ISelectorProps): void {
+  if (props.selected === undefined || props.selected === null) {
+    return;
+  }
+
+  const scale = (props.scale ?? 1);
+  let [x, y] = GetAbsolutePosition(props.selected);
+  let [width, height] = [
+    props.selected.properties.width,
+    props.selected.properties.height
+  ];
+
+  ({ x, y, width, height } = RemoveMargin(x, y, width, height,
+    props.selected.properties.margin.left,
+    props.selected.properties.margin.bottom,
+    props.selected.properties.margin.top,
+    props.selected.properties.margin.right
+  ));
+
+  const xText = x + width / 2;
+  const yText = y + height / 2;
+
+  const style: React.CSSProperties = {
+    stroke: '#3B82F6',
+    strokeWidth: 4 / scale,
+    fillOpacity: 0,
+    transitionProperty: 'all',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDuration: '150ms',
+    animation: 'fadein 750ms ease-in alternate infinite'
+  };
+
+  ctx.strokeStyle = '#3B82F6';
+  ctx.lineWidth = 4 / scale;
+  ctx.globalAlpha = 0.25 * (Math.sin(frameCount * 0.0125) ** 2);
+  ctx.strokeRect(x, y, width, height);
+  ctx.globalAlpha = 1;
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'black';
+
+  if (SHOW_SELECTOR_TEXT) {
+    ctx.font = `${16 / scale}px Verdana`;
+    ctx.textAlign = 'center';
+    ctx.fillText(props.selected.properties.displayedText, xText, yText);
+    ctx.textAlign = 'left';
+  }
+}