combined saved model with widget model files

packages/renderer/src/WidgetWorkspace/models/WorkspaceModel.tsx

@@ -26,7 +26,7 @@ import { BaseWidgetClass } from '../widget-types/BaseWidgetClass';
 import { DiamondGridDividerWidgetModel } from
   '../../widgets/CrosshatchShelves/DiamondGridDividerWidgetModel';
 import { TriangularGridWidgetModel }
-  from '../../widgets/CrosshatchShelves/TriangularGrid/TriangularGridWidget';
+  from '../../widgets/CrosshatchShelves/TriangularGrid';
 
 // this assumes a file extension exists
 const baseFileName = (fileName) => fileName.split('.').slice(0, -1).join('.');

packages/renderer/src/widgets/CrosshatchShelves/DiamondGridDividerWidgetModel.tsx

@@ -1,9 +1,129 @@
 import { ExtendedModel, model, prop } from 'mobx-keystone';
 import { computed } from 'mobx';
 import React from 'react';
+import Flatten from '@flatten-js/core';
+import { round } from 'lodash';
 import { BaseWidgetClass } from '../../WidgetWorkspace/widget-types/BaseWidgetClass';
-import { DiamondGridDividerSavedModel } from './DiamondGridDividerSavedModel';
-import { DisjunctAssetsDefinition } from '../../WidgetWorkspace/widget-types/DisjunctAssetsDefinition';
+import {
+  DisjunctAssetsDefinition,
+  DisjunctWidgetAssetMember,
+} from '../../WidgetWorkspace/widget-types/DisjunctAssetsDefinition';
+import { DividerBaseSavedModel } from './DividerBaseSavedModel';
+import { augmentSegmentEndpoints, getPositiveSlopeSlatSegments, notchPanel } from './util';
+import { PathData } from '../../common/path/PathData';
+import { getBoundingBoxAttrs } from '../../common/util/svg';
+import { switchProp } from '../../common/keystone-tweakables/props';
+import Point = Flatten.Point;
+import point = Flatten.point;
+import segment = Flatten.segment;
+import Segment = Flatten.Segment;
+
+const reflectByWidth = (pt: Point, width: number) => (point(width - pt.x, pt.y));
+
+interface SegmentInfo {
+  length: number,
+  copies: number,
+  firstIndex: number,
+}
+
+@model('DiamondGridDividerSavedModel')
+export class DiamondGridDividerSavedModel extends ExtendedModel(DividerBaseSavedModel, {
+  flushPostProcess: switchProp(false),
+}) {
+  panelSpacingRatio = 1.1;
+
+  @computed
+  get positiveCrosshatchSegments() {
+    return getPositiveSlopeSlatSegments(
+      this.shelfWidth.value, this.shelfHeight.value,
+      this.cubbyWidth.value, this.materialThickness.value,
+    ).map((seg) => augmentSegmentEndpoints(seg, this.matThicknessAdjust));
+  }
+
+  @computed
+  get crosshatchProfilePath() {
+    return this.positiveCrosshatchSegments.reduce((path, segment) => path
+      .move(segment.ps).line(segment.pe)
+      .move(reflectByWidth(segment.ps, this.shelfWidth.value))
+      .line(reflectByWidth(segment.pe, this.shelfWidth.value)),
+    new PathData());
+  }
+
+  @computed
+  get uniqueSegmentsInfo(): SegmentInfo[] {
+    // could iterate over only half but this complicates case of centerd crosshatch
+    return this.positiveCrosshatchSegments
+      .map((segment) => round(segment.length, 10))
+      .reduce((acc, segLen, index) => {
+        // could be more efficient, meh
+        const lengthMatch = acc.find(({ length }) => length === segLen);
+        if (lengthMatch) {
+          lengthMatch.copies += 2;
+        } else {
+          acc.push({
+            length: segLen,
+            firstIndex: index,
+            copies: 2,
+          });
+        }
+        return acc;
+      }, [] as SegmentInfo[]);
+  }
+
+  @computed
+  get matThicknessAdjust(): number {
+    return ((this.flushPostProcess.value ? 1 : -1) * (this.materialThickness.value / 2));
+  }
+
+  getMirroredSegment(seg: Segment) {
+    const mirrorStart = reflectByWidth(seg.ps, this.shelfWidth.value);
+    const mirrorEnd = reflectByWidth(seg.pe, this.shelfWidth.value);
+    return segment(mirrorStart, mirrorEnd);
+  }
+
+  getFirstPanelNotchCenter(segIndex: number): number {
+    const targetSeg = this.positiveCrosshatchSegments[segIndex];
+    const firstIntersectionSegment = this.positiveCrosshatchSegments.find((seg) => {
+      const mirrorSegment = this.getMirroredSegment(seg);
+      const intersection = mirrorSegment.intersect(targetSeg);
+      return intersection.length > 0;
+    });
+    return targetSeg.intersect(this.getMirroredSegment(firstIntersectionSegment))[0].distanceTo(targetSeg.ps)[0];
+  }
+
+  getNumIntersectionsForPanel(segIndex: number) {
+    const targetSeg = this.positiveCrosshatchSegments[segIndex];
+    return this.positiveCrosshatchSegments
+      .reduce((numIntersects, seg) => (
+        this.getMirroredSegment(seg).intersect(targetSeg).length ? numIntersects + 1 : numIntersects
+      ), 0);
+  }
+
+  @computed
+  get panelAssetMembers(): DisjunctWidgetAssetMember[] {
+    return this.uniqueSegmentsInfo.map(({ length, copies, firstIndex }, index) => {
+      const start = this.getFirstPanelNotchCenter(firstIndex);
+      const path = notchPanel(
+        start, length, this.shelfDepth.value,
+        this.getNumIntersectionsForPanel(firstIndex),
+        this.cubbyWidth.value, this.materialThickness.value,
+      );
+      const d = path.getD();
+      const transY = (this.shelfHeight.value + (index * this.shelfDepth.value)) * this.panelSpacingRatio;
+      const { width, height } = getBoundingBoxAttrs(d);
+      return {
+        name: `Panel ${index + 1}`,
+        documentAreaProps: { viewBox: `0 ${transY} ${width} ${height}` },
+        copies,
+        Component: () => (
+          <g transform={`translate(0, ${transY})`}>
+            <path d={d} fill="none" stroke="red" strokeWidth={4} />
+          </g>
+        ),
+      };
+    });
+  }
+}
 
 @model('DiamondGridDividerWidgetModel')
 export class DiamondGridDividerWidgetModel extends ExtendedModel(BaseWidgetClass, {