unfilled objects can now be unsolid

This commit is contained in:
casperlamboo 2017-11-28 15:47:26 +01:00
parent c580d4e5b8
commit 5176277cc3
7 changed files with 51 additions and 24 deletions

View File

@ -29,11 +29,11 @@ window.actions = actionWrapper(actions, store.dispatch);
// add inital shapes // add inital shapes
import * as CAL from 'cal'; import * as CAL from 'cal';
store.dispatch(actions.addObject({ store.dispatch(actions.addObject({
type: 'STAR', type: 'FREE_HAND',
fill: true, fill: false,
solid: 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({ store.dispatch(actions.addObject({
type: 'RECT', type: 'RECT',

View File

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

View File

@ -105,16 +105,8 @@ export default class Shape extends Matrix {
const lineWidth = PIXEL_RATIO * LINE_WIDTH; const lineWidth = PIXEL_RATIO * LINE_WIDTH;
context.globalAlpha = this.alpha; 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.fill();
context.strokeStyle = 'black'; context.strokeStyle = 'black';
@ -129,7 +121,7 @@ export default class Shape extends Matrix {
context.stroke(); context.stroke();
if (innerLineWidth > 0) { if (innerLineWidth > 0) {
context.strokeStyle = this.color; context.strokeStyle = this._shapeData.solid ? this.color : holePatern;
context.lineWidth = innerLineWidth; context.lineWidth = innerLineWidth;
context.stroke(); context.stroke();
} }

3
src/d3/ShapeMesh.js vendored
View File

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

View File

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

View File

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

View File

@ -219,8 +219,43 @@ function shapeToPointsRaw(shapeData) {
} }
export const shapeToPointsCornered = memoize(shapeToPointsCorneredRaw, { max: SHAPE_CACHE_LIMIT }); 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 { path: points, map: pointsMap } = addCorners(oldPoints);
const { paths: holes, maps: holesMaps } = oldHoles const { paths: holes, maps: holesMaps } = oldHoles
.map(hole => addCorners(hole)) .map(hole => addCorners(hole))