fix: fixes color resolving mechanic

package-lock.json

@@ -72,7 +72,7 @@
         "typescript": "^5.1.6",
         "webpack": "^5.76.2",
         "webpack-cli": "^5.0.1",
-        "webpack-dev-server": "^4.13.1"
+        "webpack-dev-server": "^4.15.1"
       },
       "peerDependencies": {
         "react": ">=17",
@@ -2962,9 +2962,9 @@
       "dev": true
     },
     "node_modules/@types/ws": {
-      "version": "8.5.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
-      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.8.tgz",
+      "integrity": "sha512-flUksGIQCnJd6sZ1l5dqCEG/ksaoAg/eUwiLAGTJQcfgvZJKF++Ta4bJA6A5aPSJmsr+xlseHn4KLgVlNnvPTg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*"
@@ -14084,9 +14084,9 @@
       }
     },
     "node_modules/webpack-dev-server": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.13.1.tgz",
-      "integrity": "sha512-5tWg00bnWbYgkN+pd5yISQKDejRBYGEw15RaEEslH+zdbNDxxaZvEAO2WulaSaFKb5n3YG8JXsGaDsut1D0xdA==",
+      "version": "4.15.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
+      "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
       "dev": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
@@ -14095,7 +14095,7 @@
         "@types/serve-index": "^1.9.1",
         "@types/serve-static": "^1.13.10",
         "@types/sockjs": "^0.3.33",
-        "@types/ws": "^8.5.1",
+        "@types/ws": "^8.5.5",
         "ansi-html-community": "^0.0.8",
         "bonjour-service": "^1.0.11",
         "chokidar": "^3.5.3",
@@ -16805,9 +16805,9 @@
       "dev": true
     },
     "@types/ws": {
-      "version": "8.5.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
-      "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.8.tgz",
+      "integrity": "sha512-flUksGIQCnJd6sZ1l5dqCEG/ksaoAg/eUwiLAGTJQcfgvZJKF++Ta4bJA6A5aPSJmsr+xlseHn4KLgVlNnvPTg==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -25052,9 +25052,9 @@
       }
     },
     "webpack-dev-server": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.13.1.tgz",
-      "integrity": "sha512-5tWg00bnWbYgkN+pd5yISQKDejRBYGEw15RaEEslH+zdbNDxxaZvEAO2WulaSaFKb5n3YG8JXsGaDsut1D0xdA==",
+      "version": "4.15.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
+      "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
       "dev": true,
       "requires": {
         "@types/bonjour": "^3.5.9",
@@ -25063,7 +25063,7 @@
         "@types/serve-index": "^1.9.1",
         "@types/serve-static": "^1.13.10",
         "@types/sockjs": "^0.3.33",
-        "@types/ws": "^8.5.1",
+        "@types/ws": "^8.5.5",
         "ansi-html-community": "^0.0.8",
         "bonjour-service": "^1.0.11",
         "chokidar": "^3.5.3",

package.json

@@ -65,7 +65,7 @@
     "typescript": "^5.1.6",
     "webpack": "^5.76.2",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.1"
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",

src/components/ColorSelector/ColorSelector.tsx

@@ -5,7 +5,7 @@ import { ColorSwatch } from './ColorSwatch';
 
 interface Props {
   onChange: (color: string) => void;
-  activeColor: string;
+  activeColor?: string;
 }
 
 export const ColorSelector = ({ onChange, activeColor }: Props) => {

src/config.ts

@@ -43,10 +43,9 @@ export const VIEW_ITEM_DEFAULTS: Required<Omit<ViewItem, 'id' | 'tile'>> = {
   labelHeight: 80
 };
 
-export const CONNECTOR_DEFAULTS: Required<Omit<Connector, 'id'>> = {
+export const CONNECTOR_DEFAULTS: Required<Omit<Connector, 'id' | 'color'>> = {
   width: 10,
   description: '',
-  color: DEFAULT_COLOR.id,
   anchors: [],
   style: 'SOLID'
 };
@@ -65,10 +64,8 @@ export const TEXTBOX_PADDING = 0.2;
 export const TEXTBOX_FONT_WEIGHT = 'bold';
 
 export const RECTANGLE_DEFAULTS: Required<
-  Omit<Rectangle, 'id' | 'from' | 'to'>
-> = {
-  color: DEFAULT_COLOR.id
-};
+  Omit<Rectangle, 'id' | 'from' | 'to' | 'color'>
+> = {};
 
 export const ZOOM_INCREMENT = 0.2;
 export const MIN_ZOOM = 0.2;
@@ -79,7 +76,7 @@ export const INITIAL_DATA: Model = {
   title: 'Untitled',
   version: '',
   icons: [],
-  colors: [],
+  colors: [DEFAULT_COLOR],
   items: [],
   views: []
 };

src/examples/initialData.ts

@@ -16,6 +16,10 @@ const isopacks = flattenCollections([
 ]);
 
 export const colors: Colors = [
+  {
+    id: 'color1',
+    value: '#a5b8f3'
+  },
   {
     id: 'color2',
     value: '#bbadfb'

src/hooks/useColor.ts

@@ -2,10 +2,18 @@ import { useMemo } from 'react';
 import { getItemByIdOrThrow } from 'src/utils';
 import { useScene } from 'src/hooks/useScene';
 
-export const useColor = (colorId: string) => {
+export const useColor = (colorId?: string) => {
   const { colors } = useScene();
 
   const color = useMemo(() => {
+    if (colorId === undefined) {
+      if (colors.length > 0) {
+        return colors[0];
+      }
+
+      throw new Error('No colors available.');
+    }
+
     return getItemByIdOrThrow(colors, colorId).value;
   }, [colorId, colors]);
 

src/hooks/useConnector.ts

@@ -1,11 +1,8 @@
 import { useMemo } from 'react';
-import { Connector, SceneConnector } from 'src/types';
 import { getItemByIdOrThrow } from 'src/utils';
 import { useScene } from 'src/hooks/useScene';
 
-export const useConnector = (
-  id: string
-): Required<Connector> & SceneConnector => {
+export const useConnector = (id: string) => {
   const { connectors } = useScene();
 
   const connector = useMemo(() => {

src/hooks/useScene.ts

@@ -16,7 +16,6 @@ import type { State } from 'src/stores/reducers/types';
 import { getItemByIdOrThrow } from 'src/utils';
 import {
   CONNECTOR_DEFAULTS,
-  DEFAULT_COLOR,
   RECTANGLE_DEFAULTS,
   TEXTBOX_DEFAULTS
 } from 'src/config';
@@ -43,7 +42,7 @@ export const useScene = () => {
   }, [currentView.items]);
 
   const colors = useMemo(() => {
-    return [DEFAULT_COLOR, ...model.colors];
+    return model.colors;
   }, [model.colors]);
 
   const connectors = useMemo(() => {

src/interaction/modes/Connector.ts

@@ -52,6 +52,7 @@ export const Connector: ModeActions = {
 
     const newConnector: ConnectorI = {
       id: generateId(),
+      color: scene.colors[0].id,
       anchors: []
     };
 

src/interaction/modes/Rectangle/DrawRectangle.ts

@@ -1,6 +1,5 @@
 import { ModeActions } from 'src/types';
 import { produce } from 'immer';
-import { DEFAULT_COLOR } from 'src/config';
 import { generateId, hasMovedTile, setWindowCursor } from 'src/utils';
 
 export const DrawRectangle: ModeActions = {
@@ -31,7 +30,7 @@ export const DrawRectangle: ModeActions = {
 
     scene.createRectangle({
       id: newRectangleId,
-      color: DEFAULT_COLOR.id,
+      color: scene.colors[0].id,
       from: uiState.mouse.position.tile,
       to: uiState.mouse.position.tile
     });