rendx-shape 0.1.0

package/dist/main.js

@@ -0,0 +1,511 @@
+// src/primitives/circle.ts
+var createCircle = (path, { cx, cy, r }) => {
+  path.M(cx, cy - r);
+  path.A(r, r, 0, 1, 0, cx, cy + r);
+  path.A(r, r, 0, 1, 0, cx, cy - r);
+  path.Z();
+};
+
+// src/primitives/rect.ts
+import { isNum, isUndef } from "rendx-core";
+var createRectNormal = (path, { x, y, width, height }) => {
+  path.M(x, y);
+  path.L(x + width, y);
+  path.L(x + width, y + height);
+  path.L(x, y + height);
+  path.Z();
+};
+var createRectRounded = (path, { x, y, width, height, rx, ry }) => {
+  if (isNum(rx)) rx = [rx, rx, rx, rx];
+  if (isNum(ry)) ry = [ry, ry, ry, ry];
+  const [rx1, rx2, rx3 = rx1, rx4 = rx2] = rx.map(Number).map((r) => Math.min(r, width / 2));
+  const [ry1, ry2, ry3 = ry1, ry4 = ry2] = ry.map(Number).map((r) => Math.min(r, height / 2));
+  path.M(x + rx1, y);
+  path.L(x + width - rx2, y);
+  path.A(rx2, ry2, 0, 0, 1, x + width, y + ry2);
+  path.L(x + width, y + height - ry3);
+  path.A(rx3, ry3, 0, 0, 1, x + width - rx3, y + height);
+  path.L(x + rx4, y + height);
+  path.A(rx4, ry4, 0, 0, 1, x, y + height - ry4);
+  path.L(x, y + ry1);
+  path.A(rx1, ry1, 0, 0, 1, x + rx1, y);
+  path.Z();
+};
+var createRect = (path, options) => {
+  const { rx, ry } = options;
+  if (!isUndef(rx) && rx !== 0 && !isUndef(ry) && ry !== 0) createRectRounded(path, options);
+  else createRectNormal(path, options);
+};
+
+// src/polar/arc.ts
+var createArc = (path, options) => {
+  const { cx, cy, r, startAngle, endAngle, radius } = options;
+  const r1 = r * radius;
+  const t0 = startAngle;
+  const t1 = endAngle;
+  if (Math.abs(t1 - t0) >= 2 * Math.PI) return createCircle(path, { cx, cy, r: r1 });
+  const largeArcFlag = Math.abs(t1 - t0) % (2 * Math.PI) > Math.PI ? 1 : 0;
+  path.M(cx + r1 * Math.cos(t0), cy + r1 * Math.sin(t0));
+  path.A(r1, r1, 0, largeArcFlag, 1, cx + r1 * Math.cos(t1), cy + r1 * Math.sin(t1));
+};
+
+// src/polar/ring.ts
+var createRing = (path, options) => {
+  const { cx, cy, r, innerRadius, outerRadius } = options;
+  const r0 = innerRadius * r;
+  const r1 = outerRadius * r;
+  path.M(cx, cy - r1);
+  path.A(r1, r1, 0, 1, 0, cx, cy + r1);
+  path.L(cx, cy + r0);
+  path.A(r0, r0, 0, 1, 1, cx, cy - r0);
+  path.Z();
+  path.M(cx, cy - r0);
+  path.A(r0, r0, 0, 1, 1, cx, cy + r0);
+  path.L(cx, cy + r1);
+  path.A(r1, r1, 0, 1, 0, cx, cy - r1);
+  path.Z();
+};
+
+// src/polar/sector.ts
+import { isNum as isNum2, isUndef as isUndef2 } from "rendx-core";
+var createSectorNormal = (path, options) => {
+  const { cx, cy, r, startAngle, endAngle, innerRadius, outerRadius } = options;
+  const r0 = innerRadius * r;
+  const r1 = outerRadius * r;
+  const t0 = startAngle;
+  const t1 = endAngle;
+  if (Math.abs(t1 - t0) >= 2 * Math.PI) return createRing(path, { cx, cy, r, innerRadius, outerRadius });
+  const largeArcFlag = (t1 - t0) % (2 * Math.PI) > Math.PI ? 1 : 0;
+  path.M(cx + r1 * Math.cos(t0), cy + r1 * Math.sin(t0));
+  path.A(r1, r1, 0, largeArcFlag, 1, cx + r1 * Math.cos(t1), cy + r1 * Math.sin(t1));
+  if (r0 === 0) {
+    path.L(cx, cy);
+  } else {
+    path.L(cx + r0 * Math.cos(t1), cy + r0 * Math.sin(t1));
+    path.A(r0, r0, 0, largeArcFlag, 0, cx + r0 * Math.cos(t0), cy + r0 * Math.sin(t0));
+  }
+  path.Z();
+};
+var tangent = (t, t0, r, rc, outer, left) => {
+  const rc0 = outer ? r * Math.sin(t / 2) / (1 + Math.sin(t / 2)) : r * Math.sin(t / 2) / (1 - Math.sin(t / 2));
+  if (rc > rc0) rc = rc0;
+  const sign = outer ? 1 : -1;
+  const ot = Math.asin(rc / (r + sign * rc));
+  const t1 = left ? (t0 + ot) % (2 * Math.PI) : (t0 - ot) % (2 * Math.PI);
+  const r0 = (r + sign * rc) * Math.cos(ot);
+  return {
+    ot,
+    cx: (r + sign * rc) * Math.cos(t1),
+    cy: (r + sign * rc) * Math.sin(t1),
+    x0: r0 * Math.cos(t0),
+    y0: r0 * Math.sin(t0),
+    x1: r * Math.cos(t1),
+    y1: r * Math.sin(t1),
+    rc
+  };
+};
+var epsilon = 1e-6;
+var createSectorRounded = (path, options) => {
+  const { cx, cy, r, startAngle, endAngle, innerRadius, outerRadius } = options;
+  let { rc } = options;
+  if (isNum2(rc)) rc = [rc, rc, rc, rc];
+  const r0 = innerRadius * r;
+  const r1 = outerRadius * r;
+  const t0 = startAngle;
+  const t1 = endAngle;
+  const dt = Math.abs(t1 - t0);
+  const dr = Math.abs(r1 - r0);
+  if (Math.abs(t1 - t0) >= 2 * Math.PI) return createRing(path, { cx, cy, r, innerRadius, outerRadius });
+  const [rc01, rc00, rc11 = rc01, rc10 = rc00] = rc.map((x) => Math.max(0, Math.min(x, dr / 2)));
+  if (dt < 1e-6) return;
+  const c01 = tangent(dt, t0, r1, rc01, true, true);
+  const c11 = tangent(dt, t1, r1, rc11, true, false);
+  let largeArcFlag = dt - c01.ot - c11.ot > Math.PI - epsilon ? 1 : 0;
+  path.M(cx + c01.x0, cy + c01.y0);
+  path.A(c01.rc, c01.rc, 0, 0, 1, cx + c01.x1, cy + c01.y1);
+  path.A(r1, r1, 0, largeArcFlag, 1, cx + c11.x1, cy + c11.y1);
+  path.A(c11.rc, c11.rc, 0, 0, 1, cx + c11.x0, cy + c11.y0);
+  if (r0 === 0) {
+    path.L(cx, cy);
+  } else {
+    const c00 = tangent(dt, t0, r0, rc00, false, true);
+    const c10 = tangent(dt, t1, r0, rc10, false, false);
+    largeArcFlag = dt - c00.ot - c10.ot > Math.PI - epsilon ? 1 : 0;
+    path.L(cx + c10.x0, cy + c10.y0);
+    path.A(c10.rc, c10.rc, 0, 0, 1, cx + c10.x1, cy + c10.y1);
+    path.A(r0, r0, 0, largeArcFlag, 0, cx + c00.x1, cy + c00.y1);
+    path.A(c00.rc, c00.rc, 0, 0, 1, cx + c00.x0, cy + c00.y0);
+  }
+  path.Z();
+};
+var createSector = (path, options) => {
+  const { rc, startAngle, endAngle, padAngle = 0 } = options;
+  const da = Math.abs(endAngle - startAngle) - padAngle;
+  if (da <= 1e-4) return;
+  const hp = padAngle / 2;
+  options.startAngle = startAngle + hp;
+  options.endAngle = endAngle - hp;
+  if (!isUndef2(rc) && rc !== 0) createSectorRounded(path, options);
+  else createSectorNormal(path, options);
+};
+
+// src/data/line.ts
+import { curveMap } from "rendx-curve";
+var createLine = (path, options) => {
+  const { curve = "linear", closed = false, points } = options;
+  if (Reflect.has(curveMap, curve)) curveMap[curve](path, points);
+  if (points.length === 1) path.Z();
+  if (closed) path.Z();
+};
+var createSegmentLine = (path, options) => {
+  const { curve, closed = false, segments } = options;
+  const len = segments.length;
+  for (let i = 0; i < len; i++) createLine(path, { curve, points: segments[i] });
+  if (closed) path.Z();
+};
+
+// src/data/area.ts
+import { curveMap as curveMap2 } from "rendx-curve";
+var createArea = (path, options) => {
+  const { upperPoints, lowerPoints, curve = "linear", upperCurve = curve, lowerCurve = curve } = options;
+  if (Reflect.has(curveMap2, upperCurve)) curveMap2[upperCurve](path, upperPoints);
+  const [x, y] = lowerPoints.at(-1);
+  path.L(x, y);
+  if (Reflect.has(curveMap2, lowerCurve)) curveMap2[lowerCurve](path, lowerPoints.reverse(), false);
+  path.Z();
+};
+var createSegmentArea = (path, options) => {
+  const { upperSegments, lowerSegments, curve = "linear", upperCurve = curve, lowerCurve = curve } = options;
+  const length = Math.min(upperSegments.length, lowerSegments.length);
+  for (let i = 0; i < length; i++) {
+    createArea(path, { upperPoints: upperSegments[i], lowerPoints: lowerSegments[i], curve, upperCurve, lowerCurve });
+  }
+};
+
+// src/data/box.ts
+var createBoxX = (path, options) => {
+  const { cx, minY, maxY, q1Y, q2Y, q3Y, x, y, width, height } = options;
+  path.clear();
+  path.M(x, y).H(x + width).V(y + height).H(x).Z();
+  path.M(cx, maxY).V(q3Y);
+  path.M(cx, minY).V(q1Y);
+  path.M(x, maxY).H(x + width);
+  path.M(x, q2Y).H(x + width);
+  path.M(x, minY).H(x + width);
+};
+var createBoxY = (path, options) => {
+  const { cy, minX, maxX, q1X, q2X, q3X, x, y, width, height } = options;
+  path.clear();
+  path.M(x, y).H(x + width).V(y + height).H(x).Z();
+  path.M(maxX, cy).H(q3X);
+  path.M(minX, cy).H(q1X);
+  path.M(maxX, y).V(y + height);
+  path.M(q2X, y).V(y + height);
+  path.M(minX, y).V(y + height);
+};
+
+// src/factory.ts
+var shapeCreators = /* @__PURE__ */ new Map([
+  ["circle", createCircle],
+  ["rect", createRect],
+  ["arc", createArc],
+  ["sector", createSector],
+  ["line", createLine],
+  ["segmentLine", createSegmentLine],
+  ["area", createArea],
+  ["segmentArea", createSegmentArea],
+  ["boxX", createBoxX],
+  ["boxY", createBoxY]
+]);
+var createShape = (path, type, options) => {
+  const creator = shapeCreators.get(type);
+  if (!creator) throw new Error(`Unknown shape type: ${type}`);
+  creator(path, options);
+};
+
+// src/symbols/circle.ts
+var createCircleSymbol = createCircle;
+
+// src/symbols/cross.ts
+var createCrossSymbol = (path, { cx, cy, r }) => {
+  const lw = r * 0.382;
+  path.M(cx - r, cy - lw);
+  path.L(cx - lw, cy - lw);
+  path.L(cx - lw, cy - r);
+  path.L(cx + lw, cy - r);
+  path.L(cx + lw, cy - lw);
+  path.L(cx + r, cy - lw);
+  path.L(cx + r, cy + lw);
+  path.L(cx + lw, cy + lw);
+  path.L(cx + lw, cy + r);
+  path.L(cx - lw, cy + r);
+  path.L(cx - lw, cy + lw);
+  path.L(cx - r, cy + lw);
+  path.Z();
+};
+
+// src/symbols/diamond.ts
+var createDiamondSymbol = (path, { cx, cy, r }) => {
+  path.M(cx - r, cy);
+  path.L(cx, cy - r);
+  path.L(cx + r, cy);
+  path.L(cx, cy + r);
+  path.Z();
+};
+
+// src/symbols/square.ts
+var createSquareSymbol = (path, { cx, cy, r }) => {
+  path.M(cx - r, cy - r);
+  path.L(cx + r, cy - r);
+  path.L(cx + r, cy + r);
+  path.L(cx - r, cy + r);
+  path.Z();
+};
+
+// src/symbols/triangle.ts
+var createTriangle = (path, cx, cy, r, points) => {
+  path.M(cx + points[0][0] * r, cy + points[0][1] * r);
+  for (let i = 1; i < points.length; i++) path.L(cx + points[i][0] * r, cy + points[i][1] * r);
+  path.Z();
+};
+var createUpTriangleSymbol = (path, { cx, cy, r }) => {
+  createTriangle(path, +cx, +cy, +r, [
+    [0, -1],
+    [-1, 1],
+    [1, 1]
+  ]);
+};
+var createDownTriangleSymbol = (path, { cx, cy, r }) => {
+  createTriangle(path, +cx, +cy, +r, [
+    [0, 1],
+    [-1, -1],
+    [1, -1]
+  ]);
+};
+var createLeftTriangleSymbol = (path, { cx, cy, r }) => {
+  createTriangle(path, +cx, +cy, +r, [
+    [-1, 0],
+    [1, -1],
+    [1, 1]
+  ]);
+};
+var createRightTriangleSymbol = (path, { cx, cy, r }) => {
+  createTriangle(path, +cx, +cy, +r, [
+    [1, 0],
+    [-1, -1],
+    [-1, 1]
+  ]);
+};
+var createTriangleSymbol = createUpTriangleSymbol;
+var createInvertedTriangleSymbol = createDownTriangleSymbol;
+
+// src/symbols/line.ts
+var createHLineSymbol = (path, { cx, cy, r }) => {
+  path.M(cx - r, cy);
+  path.L(cx + r, cy);
+  path.Z();
+};
+var createVLineSymbol = (path, { cx, cy, r }) => {
+  path.M(cx, cy - r);
+  path.L(cx, cy + r);
+  path.Z();
+};
+
+// src/symbols/eye.ts
+var createEyeSymbol = (path, { cx, cy, r }) => {
+  path.M(cx, cy - r);
+  path.A(r, r, 0, 1, 0, cx, cy + r);
+  path.A(r, r, 0, 1, 0, cx, cy - r);
+  path.Z();
+};
+var createClosedEyeSymbol = (path, { cx, cy, r }) => {
+  const rx = r * 2 / 3;
+  const ry = r / 2;
+  const r2 = r / 5;
+  const dx = r * 2 / 3 + 2;
+  const dy = r / 5 + 2;
+  path.M(cx - rx, cy);
+  path.A(rx, ry, 0, 1, 0, cx + rx, cy);
+  path.A(rx, ry, 0, 1, 0, cx - rx, cy);
+  path.M(cx - r2, cy);
+  path.A(r2, r2, 0, 1, 1, cx + r2, cy);
+  path.A(r2, r2, 0, 1, 1, cx - r2, cy);
+  path.M(cx - dx, cy + dy);
+  path.L(cx + dx, cy - dy);
+};
+
+// src/symbols/reset.ts
+var createResetSymbol = (path, { cx, cy, r }) => {
+  path.M(cx - 0.5 * r, cy + 0.2 * r);
+  path.L(cx - 0.5 * r, cy + r);
+  path.L(cx + r, cy + r);
+  path.L(cx + r, cy - 0.5 * r);
+  path.L(cx - 0.8 * r, cy - 0.5 * r);
+  path.M(cx - 0.2 * r, cy - 0.8 * r);
+  path.L(cx - 0.8 * r, cy - 0.5 * r);
+  path.L(cx - 0.2 * r, cy - 0.2 * r);
+};
+
+// src/symbols/select.ts
+var createSelectSymbol = (path, { cx, cy, r }) => {
+  path.M(cx - 0.5 * r, cy + 0.2 * r);
+  path.L(cx - 0.5 * r, cy + r);
+  path.L(cx + r, cy + r);
+  path.L(cx + r, cy - 0.5 * r);
+  path.L(cx + 0.2 * r, cy - 0.5 * r);
+  path.M(cx - r, cy - 0.5 * r);
+  path.L(cx, cy - 0.5 * r);
+  path.M(cx - 0.5 * r, cy - r);
+  path.L(cx - 0.5 * r, cy);
+};
+
+// src/symbols/star.ts
+var STAR_COS = [];
+var STAR_SIN = [];
+for (let i = 0; i < 5; i++) {
+  const a0 = (i * 72 - 18) * Math.PI / 180;
+  const a1 = a0 + 36 * Math.PI / 180;
+  STAR_COS.push(Math.cos(a0), 0.5 * Math.cos(a1));
+  STAR_SIN.push(Math.sin(a0), 0.5 * Math.sin(a1));
+}
+var createStarSymbol = (path, { cx, cy, r }) => {
+  path.M(cx + r * STAR_COS[0], cy + r * STAR_SIN[0]);
+  for (let i = 1; i < 10; i++) {
+    path.L(cx + r * STAR_COS[i], cy + r * STAR_SIN[i]);
+  }
+  path.Z();
+};
+
+// src/symbols/wye.ts
+var sin = 0.5;
+var cos = Math.sqrt(3) / 2;
+var createWyeSymbol = (path, { cx, cy, r }) => {
+  const lineWidth = r * (1 - 0.618);
+  const r1 = r;
+  const r2 = 1 / cos * lineWidth;
+  const r3 = r - r2 * sin;
+  const r4 = r - lineWidth * (cos / sin);
+  path.M(cx - r2 * cos, cy + r2 * sin);
+  path.L(cx - r2 * cos, cy + r1);
+  path.L(cx + r2 * cos, cy + r1);
+  path.L(cx + r2 * cos, cy + r2 * sin);
+  path.L(cx + 2 * lineWidth + r4 * cos, cy - r4 * sin);
+  path.L(cx + r3 * cos, cy - r2 - r3 * sin);
+  path.L(cx, cy - r2);
+  path.L(cx - r3 * cos, cy - r2 - r3 * sin);
+  path.L(cx - 2 * lineWidth - r4 * cos, cy - r4 * sin);
+  path.Z();
+};
+
+// src/symbols/index.ts
+var fillSymbolMap = {
+  circle: createCircleSymbol,
+  cross: createCrossSymbol,
+  diamond: createDiamondSymbol,
+  square: createSquareSymbol,
+  triangle: createUpTriangleSymbol,
+  iTriangle: createDownTriangleSymbol,
+  upTriangle: createUpTriangleSymbol,
+  downTriangle: createDownTriangleSymbol,
+  leftTriangle: createLeftTriangleSymbol,
+  rightTriangle: createRightTriangleSymbol
+};
+var featureSymbolMap = {
+  line: createHLineSymbol,
+  hLine: createHLineSymbol,
+  vLine: createVLineSymbol,
+  eye: createEyeSymbol,
+  closedEye: createClosedEyeSymbol,
+  reset: createResetSymbol,
+  select: createSelectSymbol
+};
+var fillSymbols = Object.keys(fillSymbolMap);
+var createSymbol = (path, symbol, options) => {
+  if (fillSymbolMap[symbol]) fillSymbolMap[symbol](path, options);
+  else if (featureSymbolMap[symbol]) featureSymbolMap[symbol](path, options);
+  else fillSymbolMap.circle(path, options);
+};
+
+// src/general/indicator-box.ts
+var createIndicatorBox = (path, options) => {
+  const { anchor, anchorSize: s, width: w, height: h } = options;
+  const s2 = s / 2;
+  const w2 = w / 2;
+  const h2 = h / 2;
+  if (anchor === "top") {
+    path.M(-w2, s);
+    path.L(-s2, s);
+    path.L(0, 0);
+    path.L(s2, s);
+    path.L(w2, s);
+    path.L(w2, h + s);
+    path.L(-w2, h + s);
+    path.Z();
+  } else if (anchor === "bottom") {
+    path.M(-w2, -h - s);
+    path.L(w2, -h - s);
+    path.L(w2, -s);
+    path.L(s2, -s);
+    path.L(0, 0);
+    path.L(-s2, -s);
+    path.L(-w2, -s);
+    path.Z();
+  } else if (anchor === "left") {
+    path.M(s, -h2);
+    path.L(s, -s2);
+    path.L(0, 0);
+    path.L(s, s2);
+    path.L(s, h2);
+    path.L(w + s, h2);
+    path.L(w + s, -h2);
+    path.Z();
+  } else if (anchor === "right") {
+    path.M(-w - s, -h2);
+    path.L(-w - s, h2);
+    path.L(-s, h2);
+    path.L(-s, s2);
+    path.L(0, 0);
+    path.L(-s, -s2);
+    path.L(-s, -h2);
+    path.Z();
+  }
+};
+export {
+  createArc,
+  createArea,
+  createBoxX,
+  createBoxY,
+  createCircle,
+  createCircleSymbol,
+  createClosedEyeSymbol,
+  createCrossSymbol,
+  createDiamondSymbol,
+  createDownTriangleSymbol,
+  createEyeSymbol,
+  createHLineSymbol,
+  createIndicatorBox,
+  createInvertedTriangleSymbol,
+  createLeftTriangleSymbol,
+  createLine,
+  createRect,
+  createRectNormal,
+  createRectRounded,
+  createResetSymbol,
+  createRightTriangleSymbol,
+  createRing,
+  createSector,
+  createSectorNormal,
+  createSectorRounded,
+  createSegmentArea,
+  createSegmentLine,
+  createSelectSymbol,
+  createShape,
+  createSquareSymbol,
+  createStarSymbol,
+  createSymbol,
+  createTriangleSymbol,
+  createUpTriangleSymbol,
+  createVLineSymbol,
+  createWyeSymbol,
+  fillSymbols
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "rendx-shape",
+  "version": "0.1.0",
+  "description": "Shape generators (circle, rect, arc, sector, area, polygon, symbol)",
+  "license": "MIT",
+  "author": "wei.liang (https://github.com/weiliang0121)",
+  "type": "module",
+  "keywords": [
+    "rendx",
+    "2d",
+    "canvas",
+    "rendering",
+    "visualization",
+    "scene-graph"
+  ],
+  "homepage": "https://weiliang0121.github.io/rendx/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/weiliang0121/rendx.git",
+    "directory": "packages/shape"
+  },
+  "main": "dist/main.cjs",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs"
+    }
+  },
+  "dependencies": {
+    "rendx-curve": "^0.1.0",
+    "rendx-path": "^0.1.0",
+    "rendx-core": "^0.1.0"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}