updated normal polygon and circle colour

src/components/BlockPolygon.ts

@@ -0,0 +1,52 @@
+import { CustomPIXIComponent } from 'react-pixi-fiber';
+import { Graphics, Point, Texture, SCALE_MODES } from 'pixi.js';
+
+import invalidPolygon from 'static/invalid_polygon.png';
+import { getFillColor, getLineColor } from 'src/utils/color';
+import { lineWidth } from 'src/config';
+
+const invalidPolygonTexture = Texture.from(invalidPolygon, {
+	scaleMode: SCALE_MODES.NEAREST,
+});
+
+type Props = {
+	fill: number;
+	points: Array<Point>;
+	showInvalidTexture: boolean;
+};
+
+export const behavior = {
+	customDisplayObject: (): Graphics => new Graphics(),
+	customApplyProps: function(instance: Graphics, oldProps: Props | undefined, newProps: Props): void {
+		const { fill: oldFill, points: oldPoints, showInvalidTexture: oldShowInvalidTexture, ...remainingOldProps } = oldProps ?? {};
+		const { fill, points, showInvalidTexture, ...remainingNewProps } = newProps;
+
+		if (fill !== oldFill || points !== oldPoints || showInvalidTexture !== oldShowInvalidTexture) {
+			instance.clear();
+
+			instance.lineStyle({
+				width: lineWidth,
+				color: getLineColor(fill),
+				alignment: 0,
+			});
+
+			instance.beginFill(getFillColor(fill));
+			instance.drawPolygon(points);
+			instance.endFill();
+
+
+			if (showInvalidTexture) {
+				instance.beginTextureFill({
+					texture: invalidPolygonTexture,
+					color: 0xff0000,
+				});
+				instance.drawPolygon(points);
+				instance.endFill();
+			}
+		}
+
+		// @ts-expect-error
+		this.applyDisplayObjectProps(remainingOldProps, remainingNewProps);
+	},
+};
+export default CustomPIXIComponent(behavior, 'BlockPolygon');

src/components/Circle.ts

@@ -1,5 +1,7 @@
 import { CustomPIXIComponent } from 'react-pixi-fiber';
 import { Graphics } from 'pixi.js';
+import { getFillColor, getLineColor } from 'src/utils/color';
+import { lineWidth } from 'src/config';
 
 type Props = {
 	fill: number;
@@ -15,7 +17,13 @@ export const behavior = {
 		if (fill !== oldFill || radius !== oldRadius) {
 			instance.clear();
 
-			instance.beginFill(fill);
+			instance.lineStyle({
+				width: lineWidth,
+				color: getLineColor(fill),
+				alignment: 0,
+			});
+
+			instance.beginFill(getFillColor(fill));
 			instance.drawCircle(0, 0, radius);
 			instance.endFill();
 		}

src/components/Door.ts

@@ -2,7 +2,7 @@ import { CustomPIXIComponent } from 'react-pixi-fiber';
 import { Graphics } from 'pixi.js';
 
 import grabbable from 'src/utils/grabbable';
-import { getLineColor, getStrokeColor } from 'src/utils/color';
+import { getLineColor, getFillColor } from 'src/utils/color';
 import { lineWidth, doorWidth, doorHeight, doorColor } from 'src/config';
 
 type Props = {
@@ -20,7 +20,7 @@ export const behavior = {
 			1,
 			0,
 		);
-		instance.beginFill(getStrokeColor(doorColor));
+		instance.beginFill(getFillColor(doorColor));
 
 		// frame of the door
 		instance.drawRect(-doorWidth/2, -doorHeight/2, doorWidth, doorHeight);

src/components/ModifiablePolygon.tsx

@@ -4,18 +4,20 @@ import { Point as PixiPoint, InteractionEvent, Rectangle } from 'pixi.js';
 import { observer } from 'mobx-react-lite';
 
 import Polygon from 'src/components/Polygon';
+import BlockPolygon from 'src/components/BlockPolygon';
 import ProgressiveText from 'src/components/ProgressiveText';
 import Point from 'src/components/Point';
 import grabbable from 'src/utils/grabbable';
 import { useStore } from 'src/hooks/useStore';
+import { AddType } from 'src/types/entity';
 
-const GrabbablePolygon = grabbable(Polygon);
 const GrabbablePoint = grabbable(Point);
 
 const emptyArea = new Rectangle(0, 0, 0, 0);
 
 type Props = {
 	fill: number;
+	addType?: AddType;
 	points: Array<{
 		point: PixiPoint;
 		isSelected: boolean;
@@ -27,9 +29,10 @@ type Props = {
 	[index: string]: unknown;
 };
 
-const ModifiablePolygon: FunctionComponent<Props> = ({ fill, points, onPolygonPointerDown, onVertexPointerDown, isValid, ...props }) => {
+const ModifiablePolygon: FunctionComponent<Props> = ({ fill, addType, points, onPolygonPointerDown, onVertexPointerDown, isValid, ...props }) => {
 	const { editor } = useStore();
 	const actualPoints = points.map(({ point }) => point);
+	const GrabbablePolygon = (addType === AddType.paint) ? grabbable(Polygon) : grabbable(BlockPolygon);
 
 	return (
 		<Container>

src/components/PixiApp.tsx

@@ -18,6 +18,7 @@ import HoppiM from 'src/models/Hoppi';
 import TextM from 'src/models/Text';
 import PaintM from 'src/models/Paint';
 import ProgressiveText from 'src/components/ProgressiveText';
+import { AddType } from 'src/types/entity';
 
 const entityColors = {
 	deadly: 0xff0000, // red
@@ -148,6 +149,7 @@ const PixiApp: FunctionComponent = () => {
 					return (
 						<ModifiablePolygon
 							isValid={entity.params.isValid}
+							addType={AddType.paint}
 							fill={entity.params.fillColor}
 							alpha={opacity}
 							points={points}

src/components/Polygon.ts

@@ -41,4 +41,4 @@ export const behavior = {
 		this.applyDisplayObjectProps(remainingOldProps, remainingNewProps);
 	},
 };
-export default CustomPIXIComponent(behavior, 'Polygon');
+export default CustomPIXIComponent(behavior, 'Polygon');

src/utils/color.ts

@@ -4,7 +4,7 @@ import { interpolateLab } from 'd3-interpolate';
 
 import { darkSlateGray } from 'src/config';
 
-export function getStrokeColor(color: number): number {
+export function getFillColor(color: number): number {
 	return utils.string2hex(
 		lab(
 			interpolateLab(