suranadira-utils/src/suranadira.js

Suranadira utilities

import suranadiraCore from "../../suranadira-core";
import Debug, { info } from "./debug";
import { createPath } from "./canvas";
const phases = suranadiraCore.suranadiraPhases;
const { getWordID } = suranadiraCore.suranadiraWords;

// Draw character by composition or wordID
export const drawCharacter = ({
  canvasElement,
  composition,
  wordID,
  properties,
  preserve,
  transparent
}) => {
  // Set defaults
  let defaults = {
    left: 0,
    top: 0,
    color: "#000",
    unit: 20,
    focusWidth: 6,
    focusHeight: 6,
    focusRectPaddingX: -3,
    focusRectPaddingY: -3,
    elementWidth: 8,
    lineWidth: 5,
    charSpaceX: 7,
    charSpaceY: 7,
    padding: 5
  };

  // Assign properties
  properties = Object.assign(defaults, properties);

  // Set defaults
  if (typeof preserve === "undefined") preserve = true;
  if (typeof transparent === "undefined") transparent = false;

  // Get canvas context
  let canvas = canvasElement;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  ctx.imageSmoothingEnabled = true;

  // Set properties for Phases
  phases.properties.unit = properties.unit;
  phases.properties.lineWidth = properties.lineWidth;
  phases.properties.ctx = ctx;
  phases.properties.startPosition = 0;
  phases.properties.left = properties.left;
  phases.properties.top = properties.top;
  phases.properties.color = properties.color;

  // Check if this is a rich composition (with style metadata)
  // Extract composition from a rich composition
  if (composition && typeof composition.composition !== "undefined") {
    if (typeof composition.style !== "undefined") {
      phases.properties = Object.assign(phases.properties, composition.style);
    }
    composition = composition.composition;
  }

  // Get the Word ID
  Debug(
    info({
      module: `suranadira.js`,
      func: "drawCharacter",
      param: "composition for getWordID(composition)",
      value: composition
    })
  );
  let id = !!wordID ? wordID : getWordID(composition);

  // Clear canvas, if necessary
  if (!transparent) {
    if (preserve) {
      // Clear the wide characters
      if (id === 30 || id === 31) {
        Debug(
          info({
            module: `suranadira.js`,
            func: "drawCharacter",
            param: "wide characters",
            value: "cleared"
          })
        );
        ctx.clearRect(
          properties.left,
          properties.top - properties.unit,
          properties.charSpaceX * properties.unit,
          properties.charSpaceY * properties.unit
        );
      }
      // Clear the characters of normal width
      else {
        Debug(
          info({
            module: `suranadira.js`,
            func: "drawCharacter",
            param: "normal characters",
            value: "cleared"
          })
        );
        ctx.clearRect(
          properties.left + 2,
          properties.top - properties.unit,
          properties.focusWidth * properties.unit - 4,
          properties.focusHeight * properties.unit
        );
      }
    } else {
      Debug(
        info({
          module: `suranadira.js`,
          func: "drawCharacter",
          param: "whole canvas",
          value: "cleared"
        })
      );
      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    }
  }

  Debug(
    info({
      module: `suranadira.js`,
      func: "drawCharacter",
      param: "id in phases.compose",
      value: id
    })
  );

  // Make a composition
  // - id, a Word ID
  phases.compose({
    id: id,
    parity: "elements",
    positions: !!wordID ? 4 : composition.length
  });

  // Set path properties
  let pathProperties = {
    left: properties.left,
    top: properties.top - properties.unit,
    width: properties.focusWidth * properties.unit,
    height: properties.focusHeight * properties.unit
  };

  // Create path for events for the composition
  let path = createPath({
    ctx: ctx,
    properties: pathProperties,
    invisible: true
  });

  return path;
};