unfilled objects can now be unsolid

index.js

@@ -29,11 +29,11 @@ window.actions = actionWrapper(actions, store.dispatch);
 // add inital shapes
 import * as CAL from 'cal';
 store.dispatch(actions.addObject({
-  type: 'STAR',
+  type: 'FREE_HAND',
-  fill: true,
+  fill: false,
   solid: false,
-  star: { innerRadius: 10, outerRadius: 20, rays: 5 },
+  points: [new CAL.Vector(-20, 0), new CAL.Vector(10, 1)],
-  transform: new CAL.Matrix({ x: -20, y: 0 })
+  transform: new CAL.Matrix({ x: 0, y: 0 })
 }));
 store.dispatch(actions.addObject({
   type: 'RECT',

src/components/SketcherToolbars.js

@@ -171,7 +171,7 @@ function filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidO
           return numSelectedObjects > 0;
 
         case contextTools.FILL_TOGGLE:
-          return numSelectedObjects > 0 && numSolidObjects === numSelectedObjects;
+          return numSelectedObjects > 0;
 
         case contextTools.ALIGN:
           return numSelectedObjects > 1;
@@ -188,7 +188,7 @@ function filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidO
           return activeTool === d2Tools.BRUSH;
 
         case contextTools.HOLE_TOGGLE:
-          return numSelectedObjects > 0 && numFilledObjects === numSelectedObjects;
+          return numSelectedObjects > 0;
 
         default:
           return true;

src/d2/Shape.js

@@ -105,16 +105,8 @@ export default class Shape extends Matrix {
     const lineWidth = PIXEL_RATIO * LINE_WIDTH;
 
     context.globalAlpha = this.alpha;
-    if (!this._shapeData.solid) {
+    if (this._shapeData.fill) {
-      context.fillStyle = holePatern;
+      context.fillStyle = this._shapeData.solid ? this.color : holePatern;
-      context.fill();
-
-      context.strokeStyle = 'black'; //'#888888';
-      context.lineWidth = lineWidth / 2.0;
-      context.stroke();
-
-    } else if (this._shapeData.fill) {
-      context.fillStyle = this.color;
       context.fill();
 
       context.strokeStyle = 'black';
@@ -129,7 +121,7 @@ export default class Shape extends Matrix {
       context.stroke();
 
       if (innerLineWidth > 0) {
-        context.strokeStyle = this.color;
+        context.strokeStyle = this._shapeData.solid ? this.color : holePatern;
         context.lineWidth = innerLineWidth;
         context.stroke();
       }

src/d3/ShapeMesh.js

@@ -45,7 +45,6 @@ class ShapeMesh extends THREE.Object3D {
     this._transform = transform;
     this._z = z;
     this._color = color;
-    this._fill = fill;
     this.updateSolid(solid, active);
     this.updatePoints(shapeData);
   }
@@ -109,7 +108,7 @@ class ShapeMesh extends THREE.Object3D {
   updatePoints(shapeData) {
     if (this._shapeData && !shapeChanged(this._shapeData, shapeData)) return false;
 
-    this._fill = shapeData.fill;
+    this._fill = shapeData.fill || !shapeData.solid;
     this._points = shapeData.points;
     this._rectSize = shapeData.rectSize;
     this._circle = shapeData.circle;

src/reducer/contextReducer.js

@@ -117,9 +117,9 @@ export default function (state, action) {
 
       return update(state, {
         objectsById: state.selection.objects.reduce((updateObject, { id }) => {
-          const { fill, type } = state.objectsById[id];
+          const { type } = state.objectsById[id];
           const d3Visible = SHAPE_TYPE_PROPERTIES[type].D3Visible;
-          if (fill && d3Visible) updateObject[id] = { solid: { $set: solid } };
+          if (d3Visible) updateObject[id] = { solid: { $set: solid } };
           return updateObject;
         }, {})
       });

src/shape/shapeDataUtils.js

@@ -15,10 +15,11 @@ export function shapeChanged(oldShapeData, newShapeData) {
   const textChanged = oldShapeData.text !== newShapeData.text;
   const polyPoints = oldShapeData.polyPoints !== newShapeData.polyPoints;
   const fillChanged = oldShapeData.fill !== newShapeData.fill;
+  const solidChanged = oldShapeData.solid !== newShapeData.solid;
   const heartChanged = oldShapeData.heart !== newShapeData.heart;
 
   return pointsChanged || holesChanged || rectSizeChanged || triangleSizeChanged ||
-    circleChanged || starChanged || textChanged || polyPoints || fillChanged || heartChanged;
+    circleChanged || starChanged || textChanged || polyPoints || fillChanged || solidChanged || heartChanged;
 }
 
 export const getPointsBounds = memoize(getPointsBoundsRaw, { max: SHAPE_CACHE_LIMIT });

src/shape/shapeToPoints.js

@@ -219,8 +219,43 @@ function shapeToPointsRaw(shapeData) {
 }
 
 export const shapeToPointsCornered = memoize(shapeToPointsCorneredRaw, { max: SHAPE_CACHE_LIMIT });
-function shapeToPointsCorneredRaw(shapeData) {
+function shapeToPointsCorneredRaw(shapeData, target) {
-  return shapeToPoints(shapeData).map(({ points: oldPoints, holes: oldHoles }) => {
+  let shapes = shapeToPoints(shapeData);
+
+  if (!shapeData.fill && !shapeData.solid) {
+    const newShapes = [];
+    for (const shape of shapes) {
+      const { points } = shape;
+      new ClipperShape([points], false, true, false, false)
+        .scaleUp(CLIPPER_PRECISION)
+        .round().removeDuplicates()
+        .offset(CLIPPER_PRECISION, {
+          jointType: 'jtSquare',
+          endType: 'etOpenSquare',
+          miterLimit: 2.0,
+          roundPrecision: 0.25
+        })
+        .scaleDown(CLIPPER_PRECISION)
+        .seperateShapes()
+        .forEach(shape => {
+          let [points, ...holes] = shape
+            .mapToLower()
+            .map(pathToVectorPath)
+            .map(path => {
+              path.push(path[0]);
+              return path;
+            });
+
+          points = setDirectionClockWise(points);
+          holes = holes.map(setDirectionCounterClockWise);
+
+          newShapes.push({ points, holes });
+        });
+    }
+    shapes = newShapes;
+  }
+
+  return shapes.map(({ points: oldPoints, holes: oldHoles }) => {
     const { path: points, map: pointsMap } = addCorners(oldPoints);
     const { paths: holes, maps: holesMaps } = oldHoles
       .map(hole => addCorners(hole))