@eturnity/eturnity_reusable_components 1.2.33 → 1.2.34-3d-master.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.33",
+  "version": "1.2.34-3d-master.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,82 +2,86 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
+
+      <modal v-if="false" backdrop="dark" :isLoading="false" :isOpen="true">
+
+    <div :style="{padding:'50px'}">
+      
       <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text
-            size="10px"
-            alignArrow="right"
-            text="infoText ceci est le text"
-          ></info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        :isError="true"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text
-            :style="{ 'justify-self': 'end' }"
-            size="12px"
-            alignArrow="center"
-            text="infoText ceci est le text"
-            >This is the tooltip text</info-text
-          >
-        </InputAnnexContainer>
-      </input-number>
-      <br />
-      <toggle
-        @on-toggle-change="onInputChange($event)"
-        :isChecked="inputValue"
-        label="My Label Text"
-        infoTextMessage="This is my test message"
-        infoTextAlign="right"
-        labelAlign="right"
-        :disabled="false"
-      />
-      <br /> -->
-      <!-- <iconCollection /> -->
-      <input-text
-        placeholder="Company name"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-        @input-blur="onInputBlur($event)"
-        type="password"
-      />
-      <br />
-      <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
-      />
+                  :value="value"
+                  :minNumber="0"
+                  unitName="mm"
+                  :numberPrecision="0"
+                  backgroundColor="transparent"
+                  borderColor="eturnityGrey"
+                  inputHeight="34px"
+                  inputWidth="420px"
+                  textAlign="left"
+                  :isInteractive="true"
+                  :interactionStep="1"
+                  alignItems="horizontal"
+                  @on-input="value=$event"
+                  @input-change="changeHandler"
+                  @input-focus="focusHandler"
+                  @input-blur="blurHandler"
+                >
+                  <template v-slot:label>
+                    <div>
+                      Interactive Label
+                    </div>
+                  </template>
+                </input-number>
+
+                <SwitchField
+                  @on-switch-change="onInputChange($event)"
+                  :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
+                  :value="value"
+                  label="label"
+                  toggleColor="red"
+                  size="large"
+                  backgroundColor="blue"
+                  labelAlign="left"
+                  fontColor="black"
+                  :disabled="false"
+                />
+               
+                <Select 
+                  :value="value"
+                  selectWidth="100%"
+                  optionWidth="50%"
+                  label="that is a label"
+                  alignItems="vertical"
+                  colorMode="dark"
+                  @input-change="value=$event"
+                  >
+                  <template #selector="{selectedValue}">
+                    value selected: {{selectedValue}}
+                  </template>
+                  <template #dropdown>
+                    <Option value="1">value one</Option>
+                    <Option value="2">value two</Option>
+                    <Option value="3">value three</Option>
+                    <Option value="4">value four</Option>
+                  </template>
+                </Select> 
+                
+                </div>
+      </modal>
+      <iconCollection/>
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue-styled-components'
-import theme from './assets/theme'
-import styled from 'vue-styled-components'
-import InputNumber from '@/components/inputs/inputNumber'
-import InputText from '@/components/inputs/inputText'
-// import Checkbox from '@/components/inputs/checkbox'
-// import PageSubtitle from '@/components/pageSubtitle'
-// import Spinner from '@/components/spinner'
-// import ExternalButton from '@/components/buttons/externalButton'
-// import ProjectMarker from '@/components/projectMarker'
-// import iconCollection from '@/components/icon/iconCollection'
-// import Modal from '@/components/modals/modal'
+import { ThemeProvider } from "vue-styled-components"
+import theme from "./assets/theme"
+import styled from "vue-styled-components"
+import InputNumber from "@/components/inputs/inputNumber"
+import Select from "@/components/inputs/select"
+import SwitchField from "@/components/inputs/switchField"
+import Option from "@/components/inputs/select/option"
+import Modal from "@/components/modals/modal"
+ import iconCollection from "@/components/icon/iconCollection"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -95,147 +99,34 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    // MainTable,
-    // ThreeDots,
-    // Toggle,
-    InputText
-    // PageSubtitle,
-    // Spinner,
-    // Checkbox,
-    // ExternalButton,
-    // Modal,
-    // ProjectMarker,
-    // iconCollection
-    // RowContainer
+    InputNumber,
+    Modal,
+    Option,
+    Select,
+    SwitchField,
+    iconCollection
   },
   data() {
     return {
-      num: 42,
-      inputValue: null,
-      checkedOption: 'button_1',
-      question: {
-        number_format_precision: 4,
-        number_min_allowed: 0,
-        number_max_allowed: 10,
-        unit_short_name: 'cm'
-      },
-      dropdownOpen: false,
-      isChecked: false,
-      listOptions: [
-        {
-          name: 'Option 1',
-          value: 'option_1',
-          disabled: true
-        },
-        {
-          name: 'Option 2',
-          value: 'option_2'
-        },
-        {
-          name: 'Option 3',
-          value: 'option_3'
-        },
-        {
-          name: 'Option 4',
-          value: 'option_4'
-        }
-      ],
-      itemOptions: [
-        {
-          display_name: 'Test 1',
-          company_item_number: '123',
-          model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
-          id: 1
-        },
-        {
-          display_name: 'Test 2',
-          company_item_number: '1234',
-          model: 'BTB-123',
-          id: 2
-        },
-        {
-          display_name: 'Test 3',
-          company_item_number: '12345',
-          model: 'BTB-543',
-          id: 3
-        },
-        {
-          display_name: 'Test 4',
-          company_item_number: '123456',
-          model: 'BTB-4930',
-          id: 4
-        }
-      ],
-      markersArray: [
-        {
-          id: 1180,
-          choice: 'project-on-hold',
-          translations: {
-            fr: { name: 'fr - Project on hold' },
-            'en-us': { name: 'Project on hold' },
-            'it-ch': { name: 'it-ch - Project on hold' },
-            'de-ch': { name: 'de-ch - Project on hold' },
-            'fr-be': { name: 'fr-be - Project on hold' }
-          },
-          color: '#D27CCA',
-          can_be_deleted: true
-        },
-        {
-          id: 266,
-          choice: 'transferred',
-          translations: {
-            'en-us': { name: 'Transferred' },
-            fr: { name: 'fr - Transferred' },
-            'de-ch': { name: 'de-ch - Transferred' },
-            'it-ch': { name: 'it-ch - Transferred' },
-            'fr-be': { name: 'fr-be - Transferred' }
-          },
-          color: '#20A4CA',
-          can_be_deleted: false
-        },
-        {
-          id: 267,
-          choice: 'sold',
-          translations: {
-            'en-us': { name: 'Sold' },
-            fr: { name: 'Vendu' },
-            'de-ch': { name: 'Verkauft' },
-            'it-ch': { name: 'Venduto' },
-            'fr-be': { name: 'Vendu' }
-          },
-          color: '#008351',
-          can_be_deleted: false
-        },
-        {
-          id: 268,
-          choice: 'lost',
-          translations: {
-            'en-us': { name: 'Lost' },
-            fr: { name: 'Perdu' },
-            'de-ch': { name: 'Verloren' },
-            'it-ch': { name: 'Perso' },
-            'fr-be': { name: 'Perdu' }
-          },
-          color: '#A52019',
-          can_be_deleted: false
-        },
-        {
-          id: 1181,
-          choice: 'project-created',
-          translations: {
-            fr: { name: 'Project created' },
-            'en-us': { name: 'Project created' },
-            'it-ch': { name: 'Project created' },
-            'de-ch': { name: 'Project created' },
-            'fr-be': { name: 'Project created' }
-          },
-          color: '#FDB813',
-          can_be_deleted: true
-        }
-      ]
+      value:42,
+      value2:42,
+      companyName:"toto"
     }
   },
   methods: {
+    blurHandler(e){
+      console.log('blur',e)
+    },
+    changeHandler(e){
+      console.log('change',e)
+    },
+    focusHandler(e){
+      console.log('focus',e)
+    },
+    inputHandler(e){
+      this.value2=e
+      console.log('input',e)
+    },
     keydownHandler(e) {
       console.log('test', e)
     },

package/src/assets/svgIcons/areas_tool.svg

@@ -0,0 +1,14 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.79834" y="3" width="12" height="1.6" transform="rotate(90 3.79834 3)" fill="#B2B9C5"/>
+<rect x="16.0015" y="2.80005" width="12" height="1.6" transform="rotate(-180 16.0015 2.80005)" fill="#B2B9C5"/>
+<rect x="16.0015" y="16.8" width="12" height="1.6" transform="rotate(-180 16.0015 16.8)" fill="#B2B9C5"/>
+<path d="M4.99854 2C4.99854 3.10457 4.1031 4 2.99854 4C1.89397 4 0.998535 3.10457 0.998535 2C0.998535 0.89543 1.89397 0 2.99854 0C4.1031 0 4.99854 0.89543 4.99854 2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.99854 3C3.55082 3 3.99854 2.55228 3.99854 2C3.99854 1.44772 3.55082 1 2.99854 1C2.44625 1 1.99854 1.44772 1.99854 2C1.99854 2.55228 2.44625 3 2.99854 3ZM2.99854 4C4.1031 4 4.99854 3.10457 4.99854 2C4.99854 0.895431 4.1031 0 2.99854 0C1.89397 0 0.998535 0.895431 0.998535 2C0.998535 3.10457 1.89397 4 2.99854 4Z" fill="#B2B9C5"/>
+<rect x="17.7983" y="3" width="12" height="1.6" transform="rotate(90 17.7983 3)" fill="#B2B9C5"/>
+<path d="M19.0015 2C19.0015 3.10457 18.106 4 17.0015 4C15.8969 4 15.0015 3.10457 15.0015 2C15.0015 0.89543 15.8969 0 17.0015 0C18.106 0 19.0015 0.89543 19.0015 2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0015 3C17.5537 3 18.0015 2.55228 18.0015 2C18.0015 1.44772 17.5537 1 17.0015 1C16.4492 1 16.0015 1.44772 16.0015 2C16.0015 2.55228 16.4492 3 17.0015 3ZM17.0015 4C18.106 4 19.0015 3.10457 19.0015 2C19.0015 0.895431 18.106 0 17.0015 0C15.8969 0 15.0015 0.895431 15.0015 2C15.0015 3.10457 15.8969 4 17.0015 4Z" fill="#B2B9C5"/>
+<path d="M19.0015 16C19.0015 17.1046 18.106 18 17.0015 18C15.8969 18 15.0015 17.1046 15.0015 16C15.0015 14.8954 15.8969 14 17.0015 14C18.106 14 19.0015 14.8954 19.0015 16Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0015 17C17.5537 17 18.0015 16.5523 18.0015 16C18.0015 15.4477 17.5537 15 17.0015 15C16.4492 15 16.0015 15.4477 16.0015 16C16.0015 16.5523 16.4492 17 17.0015 17ZM17.0015 18C18.106 18 19.0015 17.1046 19.0015 16C19.0015 14.8954 18.106 14 17.0015 14C15.8969 14 15.0015 14.8954 15.0015 16C15.0015 17.1046 15.8969 18 17.0015 18Z" fill="#B2B9C5"/>
+<path d="M4.99854 16C4.99854 17.1046 4.1031 18 2.99854 18C1.89397 18 0.998535 17.1046 0.998535 16C0.998535 14.8954 1.89397 14 2.99854 14C4.1031 14 4.99854 14.8954 4.99854 16Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.99854 17C3.55082 17 3.99854 16.5523 3.99854 16C3.99854 15.4477 3.55082 15 2.99854 15C2.44625 15 1.99854 15.4477 1.99854 16C1.99854 16.5523 2.44625 17 2.99854 17ZM2.99854 18C4.1031 18 4.99854 17.1046 4.99854 16C4.99854 14.8954 4.1031 14 2.99854 14C1.89397 14 0.998535 14.8954 0.998535 16C0.998535 17.1046 1.89397 18 2.99854 18Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/base_layer.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/bug.svg

@@ -0,0 +1,6 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.427 239.427" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 239.427 239.427">
+  <path d="m218.396,141.794h-35.439v-37.621l28.313-28.313c2.929-2.93 2.929-7.678 0-10.607-2.929-2.93-7.678-2.929-10.606-0.001l-27.148,27.147c-3.316-20.579-18.238-37.32-37.819-43.275l36.322-36.322c2.929-2.93 2.929-7.678 0-10.607-2.929-2.928-7.678-2.928-10.606,0l-41.48,41.48-41.13-41.126c-2.929-2.928-7.678-2.928-10.606,4.44089e-16-2.929,2.93-2.929,7.678 0,10.608l35.97,35.969c-19.58,5.955-34.501,22.695-37.818,43.273l-27.146-27.145c-2.929-2.93-7.678-2.929-10.606-0.001-2.929,2.93-2.929,7.678 0,10.608l28.311,28.312v37.622h-35.877c-4.142,0-7.5,3.357-7.5,7.5 0,4.143 3.358,7.5 7.5,7.5h35.882c0.041,12.754 3.894,24.623 10.471,34.538l-35.291,35.291c-2.929,2.93-2.929,7.678 0,10.607 1.464,1.464 3.384,2.196 5.303,2.196 1.919,0 3.839-0.732 5.303-2.196l34.433-34.433c11.249,10.428 26.29,16.818 42.801,16.818 16.4,0 31.354-6.302 42.577-16.605l34.217,34.219c1.464,1.465 3.384,2.197 5.303,2.197 1.919,0 3.839-0.732 5.303-2.196 2.929-2.929 2.929-7.678 0-10.606l-35.023-35.025c6.684-9.968 10.6-21.938 10.641-34.805h35.444c4.142,0 7.5-3.357 7.5-7.5 0.001-4.143-3.357-7.501-7.499-7.501zm-98.465-80.01c19.096,7.10543e-15 35.045,13.698 38.557,31.782h-77.113c3.512-18.084 19.461-31.782 38.556-31.782zm-48.023,94.807v-48.025h40.525v95.461c-22.931-3.612-40.525-23.505-40.525-47.436zm55.525,47.436v-95.461h40.524v48.025c0,23.93-17.594,43.824-40.524,47.436z"/>
+</svg>

package/src/assets/svgIcons/direction_arrow.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="18" y="5.80005" width="12" height="1.6" transform="rotate(-180 18 5.80005)" fill="#B2B9C5"/>
+<path d="M-2.18557e-07 5L7 10L7 3.0598e-07L-2.18557e-07 5Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/distance_tool.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="18" y="8" width="10" height="1.6" transform="rotate(90 18 8)" fill="#B2B9C5"/>
+<rect x="1.6001" y="8" width="10" height="1.6" transform="rotate(90 1.6001 8)" fill="#B2B9C5"/>
+<path d="M5.19971 5.38V0.082216H6.07325C6.25138 0.082216 6.36957 0.164432 6.42781 0.328863L6.51002 0.673142C6.60251 0.577224 6.69672 0.488157 6.79264 0.405941C6.89198 0.323725 6.99818 0.253499 7.11123 0.195263C7.22427 0.133601 7.34588 0.0856414 7.47606 0.0513849C7.60966 0.0171283 7.75354 0 7.90769 0C8.23313 0 8.50204 0.0873543 8.71443 0.262063C8.92683 0.433346 9.08783 0.662865 9.19745 0.950621C9.28309 0.782763 9.38758 0.638886 9.5109 0.518988C9.63765 0.395664 9.77468 0.29632 9.92198 0.220955C10.0727 0.145591 10.2303 0.0907802 10.3947 0.0565236C10.5626 0.0188412 10.7304 0 10.8983 0C11.1963 0 11.4601 0.0445336 11.6896 0.133601C11.9191 0.222668 12.111 0.354556 12.2651 0.529264C12.4227 0.700548 12.5426 0.911226 12.6248 1.1613C12.707 1.41137 12.7482 1.6957 12.7482 2.01429V5.38H11.3299V2.01429C11.3299 1.39424 11.0644 1.08422 10.5335 1.08422C10.4136 1.08422 10.3022 1.10478 10.1995 1.14588C10.1001 1.18357 10.011 1.2418 9.93226 1.32059C9.85689 1.39938 9.79694 1.49701 9.75241 1.61349C9.7113 1.72996 9.69075 1.86356 9.69075 2.01429V5.38H8.27252V2.01429C8.27252 1.67857 8.20572 1.44049 8.07212 1.30004C7.94195 1.15616 7.7484 1.08422 7.49147 1.08422C7.32704 1.08422 7.17117 1.12362 7.02387 1.20241C6.87999 1.27777 6.74468 1.38397 6.61793 1.52099V5.38H5.19971Z" fill="#B2B9C5"/>
+<path d="M14.2998 12.9L11.5998 10.2L11.5998 15.6L14.2998 12.9Z" fill="#B2B9C5"/>
+<rect x="13.1707" y="13.7" width="8" height="1.6" transform="rotate(-180 13.1707 13.7)" fill="#B2B9C5"/>
+<path d="M3.59985 12.9L6.29985 15.6L6.29985 10.2L3.59985 12.9Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/distort_tool.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12.8" y="5.01678" width="5.94534" height="1.6" transform="rotate(90 12.8 5.01678)" fill="#B2B9C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.01814C12.5523 5.01814 13 4.57451 13 4.02725C13 3.48 12.5523 3.03636 12 3.03636C11.4477 3.03636 11 3.48 11 4.02725C11 4.57451 11.4477 5.01814 12 5.01814ZM12 6.00903C13.1046 6.00903 14 5.12176 14 4.02725C14 2.93274 13.1046 2.04547 12 2.04547C10.8954 2.04547 10 2.93274 10 4.02725C10 5.12176 10.8954 6.00903 12 6.00903Z" fill="#B2B9C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 12.9453C12.5523 12.9453 13 12.5016 13 11.9544C13 11.4071 12.5523 10.9635 12 10.9635C11.4477 10.9635 11 11.4071 11 11.9544C11 12.5016 11.4477 12.9453 12 12.9453ZM12 13.9362C13.1046 13.9362 14 13.0489 14 11.9544C14 10.8599 13.1046 9.9726 12 9.9726C10.8954 9.9726 10 10.8599 10 11.9544C10 13.0489 10.8954 13.9362 12 13.9362Z" fill="#B2B9C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 3.03639C2.55228 3.03639 3 2.59276 3 2.0455C3 1.49825 2.55228 1.05461 2 1.05461C1.44772 1.05461 1 1.49825 1 2.0455C1 2.59276 1.44772 3.03639 2 3.03639ZM2 4.02728C3.10457 4.02728 4 3.14001 4 2.0455C4 0.950994 3.10457 0.0637207 2 0.0637207C0.895431 0.0637207 0 0.950994 0 2.0455C0 3.14001 0.895431 4.02728 2 4.02728Z" fill="#B2B9C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12.9453C4.55228 12.9453 5 12.5016 5 11.9544C5 11.4071 4.55228 10.9635 4 10.9635C3.44772 10.9635 3 11.4071 3 11.9544C3 12.5016 3.44772 12.9453 4 12.9453ZM4 13.9362C5.10457 13.9362 6 13.0489 6 11.9544C6 10.8599 5.10457 9.9726 4 9.9726C2.89543 9.9726 2 10.8599 2 11.9544C2 13.0489 2.89543 13.9362 4 13.9362Z" fill="#B2B9C5"/>
+<path d="M2.80029 3.03485L4.80029 10.962L3.20029 10.962L1.20029 3.03485L2.80029 3.03485Z" fill="#B2B9C5"/>
+<path d="M11.0012 4.82001L3.00122 2.83823L3.00122 1.2528L11.0012 3.23458L11.0012 4.82001Z" fill="#B2B9C5"/>
+<rect x="11.0017" y="12.7471" width="6" height="1.58542" transform="rotate(-180 11.0017 12.7471)" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/distort_tool2.svg

@@ -0,0 +1,16 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12.8" y="5.97913" width="5" height="1.59993" transform="rotate(90 12.8 5.97913)" fill="#B2B9C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 5.98059C12.5524 5.98059 13.0001 5.53288 13.0001 4.98059C13.0001 4.42831 12.5524 3.98059 12.0002 3.98059C11.4479 3.98059 11.0002 4.42831 11.0002 4.98059C11.0002 5.53288 11.4479 5.98059 12.0002 5.98059ZM12.0002 6.98059C13.1047 6.98059 14.0001 6.08516 14.0001 4.98059C14.0001 3.87602 13.1047 2.98059 12.0002 2.98059C10.8956 2.98059 10.0002 3.87602 10.0002 4.98059C10.0002 6.08516 10.8956 6.98059 12.0002 6.98059Z" fill="#B2B9C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 12.9805C12.5524 12.9805 13.0001 12.5328 13.0001 11.9805C13.0001 11.4282 12.5524 10.9805 12.0002 10.9805C11.4479 10.9805 11.0002 11.4282 11.0002 11.9805C11.0002 12.5328 11.4479 12.9805 12.0002 12.9805ZM12.0002 13.9805C13.1047 13.9805 14.0001 13.085 14.0001 11.9805C14.0001 10.8759 13.1047 9.98047 12.0002 9.98047C10.8956 9.98047 10.0002 10.8759 10.0002 11.9805C10.0002 13.085 10.8956 13.9805 12.0002 13.9805Z" fill="#B2B9C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.00064 5.98059C5.5529 5.98059 6.0006 5.53288 6.0006 4.98059C6.0006 4.42831 5.5529 3.98059 5.00064 3.98059C4.44838 3.98059 4.00069 4.42831 4.00069 4.98059C4.00069 5.53288 4.44838 5.98059 5.00064 5.98059ZM5.00064 6.98059C6.10516 6.98059 7.00056 6.08516 7.00056 4.98059C7.00056 3.87602 6.10516 2.98059 5.00064 2.98059C3.89612 2.98059 3.00073 3.87602 3.00073 4.98059C3.00073 6.08516 3.89612 6.98059 5.00064 6.98059Z" fill="#B2B9C5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.00064 12.9805C5.5529 12.9805 6.0006 12.5328 6.0006 11.9805C6.0006 11.4282 5.5529 10.9805 5.00064 10.9805C4.44838 10.9805 4.00069 11.4282 4.00069 11.9805C4.00069 12.5328 4.44838 12.9805 5.00064 12.9805ZM5.00064 13.9805C6.10516 13.9805 7.00056 13.085 7.00056 11.9805C7.00056 10.8759 6.10516 9.98047 5.00064 9.98047C3.89612 9.98047 3.00073 10.8759 3.00073 11.9805C3.00073 13.085 3.89612 13.9805 5.00064 13.9805Z" fill="#B2B9C5"/>
+<path d="M5.80054 5.97894L5.80054 10.9789L4.20061 10.9789L4.20061 5.97894L5.80054 5.97894Z" fill="#B2B9C5"/>
+<path d="M11.0015 5.78046L6.00169 5.78046L6.00169 4.18046L11.0015 4.18046L11.0015 5.78046Z" fill="#B2B9C5"/>
+<rect x="11.002" y="12.7805" width="4.99978" height="1.6" transform="rotate(-180 11.002 12.7805)" fill="#B2B9C5"/>
+<rect width="1.63801" height="1.59996" transform="matrix(0.707091 0.707122 -0.707091 0.707122 3.42651 2.29523)" fill="#B2B9C5"/>
+<rect width="1.48059" height="1.59996" transform="matrix(0.707091 0.707122 -0.707091 0.707122 6.71997 5.58868)" fill="#B2B9C5"/>
+<rect width="1.56986" height="1.59996" transform="matrix(-0.707091 -0.707122 -0.707091 0.707122 9.47095 8.33972)" fill="#B2B9C5"/>
+<rect width="1.43677" height="1.59996" transform="matrix(0.707091 0.707122 -0.707091 0.707122 1.8623 0.730896)" fill="#B2B9C5"/>
+<path d="M0 0H3L0 3V0Z" fill="#B2B9C5"/>
+<path d="M10 10L7 10L10 7L10 10Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/draggable_corner.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L26 26H0V0Z" fill="#0068DE"/>
+<line x1="12.4823" y1="20.4854" x2="4.70417" y2="12.7072" stroke="white" stroke-linecap="round"/>
+<line x1="8.94524" y1="21.1924" x2="3.99549" y2="16.2427" stroke="white" stroke-linecap="round"/>
+</svg>

package/src/assets/svgIcons/draw_tool.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0.935568L8.49902 3.07843L6 5.22128V3.86414L3.83257 3.86414C3.63116 4.32505 3.26105 4.69539 2.80029 4.89708L2.80029 11.2313C3.26107 11.433 3.63118 11.8034 3.83259 12.2643H10.1671C10.3683 11.8039 10.7377 11.4339 11.1976 11.232V4.89642C10.4929 4.58709 10.0007 3.88313 10.0007 3.06421C10.0007 1.95964 10.8962 1.06421 12.0007 1.06421C13.1053 1.06421 14.0007 1.95964 14.0007 3.06421C14.0007 3.88555 13.5056 4.59125 12.7976 4.89915V11.2293C13.5056 11.5372 14.0007 12.2429 14.0007 13.0643C14.0007 14.1688 13.1053 15.0643 12.0007 15.0643C11.1806 15.0643 10.4758 14.5706 10.1672 13.8643L3.83262 13.8643C3.52401 14.5707 2.81917 15.0643 1.99902 15.0643C0.894454 15.0643 -0.000976562 14.1689 -0.000976562 13.0643C-0.000976562 12.2437 0.493253 11.5385 1.20029 11.2302L1.20029 4.89819C0.493253 4.58986 -0.000976562 3.88468 -0.000976562 3.06406C-0.000976562 1.95949 0.894454 1.06406 1.99902 1.06406C2.81918 1.06406 3.52404 1.55773 3.83264 2.26414L6 2.26414V0.935568ZM13.0007 13.0643C13.0007 12.5153 12.5583 12.0696 12.0106 12.0643H11.9909C11.4431 12.0696 11.0007 12.5153 11.0007 13.0643C11.0007 13.6165 11.4484 14.0643 12.0007 14.0643C12.553 14.0643 13.0007 13.6165 13.0007 13.0643ZM2.99902 3.06406C2.99902 3.61634 2.55131 4.06406 1.99902 4.06406C1.44674 4.06406 0.999023 3.61634 0.999023 3.06406C0.999023 2.51177 1.44674 2.06406 1.99902 2.06406C2.55131 2.06406 2.99902 2.51177 2.99902 3.06406ZM13.0007 3.06421C13.0007 3.61649 12.553 4.06421 12.0007 4.06421C11.4484 4.06421 11.0007 3.61649 11.0007 3.06421C11.0007 2.51192 11.4484 2.06421 12.0007 2.06421C12.553 2.06421 13.0007 2.51192 13.0007 3.06421ZM2.99902 13.0643C2.99902 13.6166 2.55131 14.0643 1.99902 14.0643C1.44674 14.0643 0.999023 13.6166 0.999023 13.0643C0.999023 12.512 1.44674 12.0643 1.99902 12.0643C2.55131 12.0643 2.99902 12.512 2.99902 13.0643Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/flatten.svg

@@ -0,0 +1,12 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.98828" y="6" width="3" height="1.6" transform="rotate(90 2.98828 6)" fill="white"/>
+<path d="M2.21317 10.8279L4.35603 8.32892H0.0703125L2.21317 10.8279Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.18945 6C2.74174 6 3.18945 5.55228 3.18945 5C3.18945 4.44772 2.74174 4 2.18945 4C1.63717 4 1.18945 4.44772 1.18945 5C1.18945 5.55228 1.63717 6 2.18945 6ZM2.18945 7C3.29402 7 4.18945 6.10457 4.18945 5C4.18945 3.89543 3.29402 3 2.18945 3C1.08488 3 0.189453 3.89543 0.189453 5C0.189453 6.10457 1.08488 7 2.18945 7Z" fill="white"/>
+<rect x="7.77344" y="3" width="6" height="1.6" transform="rotate(90 7.77344 3)" fill="white"/>
+<path d="M6.99833 10.8279L9.14118 8.32892H4.85547L6.99833 10.8279Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.97461 3C7.52689 3 7.97461 2.55228 7.97461 2C7.97461 1.44772 7.52689 1 6.97461 1C6.42232 1 5.97461 1.44772 5.97461 2C5.97461 2.55228 6.42232 3 6.97461 3ZM6.97461 4C8.07918 4 8.97461 3.10457 8.97461 2C8.97461 0.895431 8.07918 0 6.97461 0C5.87004 0 4.97461 0.895431 4.97461 2C4.97461 3.10457 5.87004 4 6.97461 4Z" fill="white"/>
+<rect x="12.5605" y="5" width="4" height="1.6" transform="rotate(90 12.5605 5)" fill="white"/>
+<path d="M11.7854 10.8279L13.9283 8.32892H9.64258L11.7854 10.8279Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7617 5C12.314 5 12.7617 4.55228 12.7617 4C12.7617 3.44772 12.314 3 11.7617 3C11.2094 3 10.7617 3.44772 10.7617 4C10.7617 4.55228 11.2094 5 11.7617 5ZM11.7617 6C12.8663 6 13.7617 5.10457 13.7617 4C13.7617 2.89543 12.8663 2 11.7617 2C10.6571 2 9.76172 2.89543 9.76172 4C9.76172 5.10457 10.6571 6 11.7617 6Z" fill="white"/>
+<rect x="14" y="14" width="14" height="1.6" transform="rotate(-180 14 14)" fill="white"/>
+</svg>

package/src/assets/svgIcons/layers_close.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99 16.505L1.62 10.775L0 12.035L9 19.035L18 12.035L16.37 10.765L8.99 16.505ZM9 14.965L16.36 9.23503L18 7.96503L9 0.965027L0 7.96503L1.63 9.23503L9 14.965Z" fill="#323232"/>
+<path d="M8.99 20.505L1.62 14.775L0 16.035L9 23.035L18 16.035L16.37 14.765L8.99 20.505Z" fill="#323232"/>
+</svg>

package/src/assets/svgIcons/layers_open.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99 17.505L1.62 11.775L0 13.035L9 20.035L18 13.035L16.37 11.765L8.99 17.505ZM9 14.965L16.36 9.23503L18 7.96503L9 0.965027L0 7.96503L1.63 9.23503L9 14.965Z" fill="#323232"/>
+<path d="M8.99 22.505L1.62 16.775L0 18.035L9 25.035L18 18.035L16.37 16.765L8.99 22.505Z" fill="#323232"/>
+</svg>

package/src/assets/svgIcons/magic_tool.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.77451 5.87537C6.42348 5.2264 7.47566 5.2264 8.12463 5.87537C8.7736 6.52434 8.7736 7.57652 8.12463 8.22549L2.83685 13.5133C2.18788 14.1622 1.1357 14.1622 0.486727 13.5133C-0.162242 12.8643 -0.162242 11.8121 0.486727 11.1631L5.77451 5.87537Z" fill="white"/>
+<path d="M13.9998 0L13.5544 1.14505C13.2528 1.92013 13.2528 2.78011 13.5544 3.5552L13.9998 4.70025L12.8548 4.25476C12.0797 3.9532 11.2197 3.9532 10.4446 4.25476L9.2996 4.70025L9.74509 3.5552C10.0466 2.78012 10.0466 1.92013 9.74509 1.14505L9.2996 0L10.4446 0.445491C11.2197 0.747047 12.0797 0.747047 12.8548 0.445491L13.9998 0Z" fill="white"/>
+<path d="M12.3948 8.99997L12.3845 9.02637C12.0829 9.80146 12.0829 10.6614 12.3845 11.4365L12.3948 11.4629L12.3684 11.4527C11.5933 11.1511 10.7333 11.1511 9.9582 11.4527L9.9318 11.4629L9.94207 11.4365C10.2436 10.6614 10.2436 9.80146 9.94207 9.02637L9.9318 8.99997L9.9582 9.01024C10.7333 9.3118 11.5933 9.3118 12.3684 9.01024L12.3948 8.99997Z" fill="white"/>
+<path d="M5.55927 0.5027L5.33136 1.0885C5.02981 1.86359 5.02981 2.72357 5.33136 3.49866L5.55927 4.08446L4.97347 3.85655C4.19839 3.55499 3.3384 3.55499 2.56332 3.85655L1.97752 4.08446L2.20543 3.49866C2.50698 2.72357 2.50698 1.86359 2.20543 1.0885L1.97752 0.5027L2.56332 0.730611C3.3384 1.03217 4.19839 1.03217 4.97347 0.730611L5.55927 0.5027Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/map_icon.svg

@@ -1,3 +1,5 @@
-<svg fill="none" height="14" viewbox="13 13 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.3333 15V24H22.1281L21.9394 24.0809L17.6667 25.912L14 24.3406V14.5165L17.2727 15.9191L17.4614 16H16.6667V25H18.6667V16H17.8719L18.0606 15.9191L22.3333 14.088L26 15.6594V25.4835L22.7273 24.0809L22.5386 24H23.3333V15H21.3333Z" stroke="#B2B9C5" stroke-width="2"></path>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12L14 14V2L9 0L5 2L0 0V12L5 14L9 12ZM4.93167 12.3571L8.93167 10.3571L12.5 11.7845V3.01555L9.06834 1.64288L5.06834 3.64288L1.5 2.21555V10.9845L4.93167 12.3571Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 13V3H5.75V13H4.25Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 11V1H9.75V11H8.25Z" fill="white"/>
 </svg>

package/src/assets/svgIcons/map_settings.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10.8889V12.4444H4.66667V10.8889H0ZM0 1.55556V3.11111H7.77778V1.55556H0ZM7.77778 14V12.4444H14V10.8889H7.77778V9.33333H6.22222V14H7.77778ZM3.11111 4.66667V6.22222H0V7.77778H3.11111V9.33333H4.66667V4.66667H3.11111ZM14 7.77778V6.22222H6.22222V7.77778H14ZM9.33333 4.66667H10.8889V3.11111H14V1.55556H10.8889V0H9.33333V4.66667Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/margin_tool.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 1.5H1.5V12.5H12.5V1.5ZM0 0V14H14V0H0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 5.5H5.5V8.5H8.5V5.5ZM4 4V10H10V4H4Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/obstacle_tool.svg

@@ -1,13 +1,9 @@
-<svg fill="none" height="23" viewbox="6 12 34 23" width="34" xmlns="http://www.w3.org/2000/svg">
-<mask height="14" id="mask0_6458_86453" maskunits="userSpaceOnUse" style="mask-type:alpha" width="14" x="13" y="13">
-<rect fill="#FF5656" height="14" width="14" x="13" y="13"></rect>
-</mask>
-<g mask="url(#mask0_6458_86453)">
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 6.77783 21.6267)" width="21" x="6.77783" y="21.6267"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 8.97803 23.8269)" width="21" x="8.97803" y="23.8269"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 11.1777 26.0269)" width="21" x="11.1777" y="26.0269"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 13.3774 28.2266)" width="21" x="13.3774" y="28.2266"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 15.5771 30.4265)" width="21" x="15.5771" y="30.4265"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 17.7773 32.6262)" width="21" x="17.7773" y="32.6262"></rect>
+<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<defs>
+    <pattern id="pattern_Z6wSY" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(-45)">
+        <path d="M0 0 L 16 0 L 16 2 L 0 2 Z" fill="red" stroke-width="0"></path>
+    </pattern>
+</defs>
+<rect width="16" height="16" fill="url(#pattern_Z6wSY)" :opacity="1" />
 </g>
 </svg>

package/src/assets/svgIcons/obstacle_tool_origin.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0.00012207L12.7992 0.000100493L0.000183181 12.8064C0.000189916 13.4033 -0.000232323 13.5001 0.000183181 14.0001H1.00016L14 1.00011C14 0.500122 14 0.561565 14 0.00012207ZM6.90688 0L0.000209705 6.90667V9.10778L9.10799 0H6.90688ZM1.55577 0C0.70021 0 0.50002 8.17776e-05 2.00428e-05 3.63588e-05L0.000209705 3.11111L3.11132 0H1.55577ZM14.0002 14V10.8889L10.8891 14C11.9261 14 12.9632 14 14.0002 14ZM4.89243 14H7.09354L14.0002 7.09333V4.89222L4.89243 14Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/opacity.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z"  /></svg>

package/src/assets/svgIcons/outline_tool.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.80078" y="4.06415" width="8" height="1.6" transform="rotate(90 2.80078 4.06415)" fill="white"/>
+<rect x="7.00195" y="3.8642" width="4" height="1.6" transform="rotate(-180 7.00195 3.8642)" fill="white"/>
+<path d="M8.5 3.07846L6.00098 0.935599L6.00098 5.22131L8.5 3.07846Z" fill="white"/>
+<rect x="11.002" y="13.8643" width="8" height="1.6" transform="rotate(-180 11.002 13.8643)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.06409C2.55228 4.06409 3 3.61637 3 3.06409C3 2.5118 2.55228 2.06409 2 2.06409C1.44772 2.06409 1 2.5118 1 3.06409C1 3.61637 1.44772 4.06409 2 4.06409ZM2 5.06409C3.10457 5.06409 4 4.16866 4 3.06409C4 1.95952 3.10457 1.06409 2 1.06409C0.895431 1.06409 0 1.95952 0 3.06409C0 4.16866 0.895431 5.06409 2 5.06409Z" fill="white"/>
+<rect x="12.7988" y="4.06433" width="8" height="1.6" transform="rotate(90 12.7988 4.06433)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 4.06421C12.5542 4.06421 13.002 3.61649 13.002 3.06421C13.002 2.51192 12.5542 2.06421 12.002 2.06421C11.4497 2.06421 11.002 2.51192 11.002 3.06421C11.002 3.61649 11.4497 4.06421 12.002 4.06421ZM12.002 5.06421C13.1065 5.06421 14.002 4.16878 14.002 3.06421C14.002 1.95964 13.1065 1.06421 12.002 1.06421C10.8974 1.06421 10.002 1.95964 10.002 3.06421C10.002 4.16878 10.8974 5.06421 12.002 5.06421Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 14.0643C12.5542 14.0643 13.002 13.6166 13.002 13.0643C13.002 12.512 12.5542 12.0643 12.002 12.0643C11.4497 12.0643 11.002 12.512 11.002 13.0643C11.002 13.6166 11.4497 14.0643 12.002 14.0643ZM12.002 15.0643C13.1065 15.0643 14.002 14.1688 14.002 13.0643C14.002 11.9597 13.1065 11.0643 12.002 11.0643C10.8974 11.0643 10.002 11.9597 10.002 13.0643C10.002 14.1688 10.8974 15.0643 12.002 15.0643Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 14.0644C2.55228 14.0644 3 13.6167 3 13.0644C3 12.5121 2.55228 12.0644 2 12.0644C1.44772 12.0644 1 12.5121 1 13.0644C1 13.6167 1.44772 14.0644 2 14.0644ZM2 15.0644C3.10457 15.0644 4 14.169 4 13.0644C4 11.9598 3.10457 11.0644 2 11.0644C0.895431 11.0644 0 11.9598 0 13.0644C0 14.169 0.895431 15.0644 2 15.0644Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/redo.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.51904 2H10.519V4H4.51904V2Z" fill="#555D61"/>
+<path d="M4.51904 8H8.51904V10H4.51904V8Z" fill="#555D61"/>
+<path d="M10.519 5.92321L13.4807 2.96161L10.519 0L10.519 5.92321Z" fill="#555D61"/>
+<path d="M7.98391 8C7.29229 9.1956 5.99961 10 4.51904 10C2.3099 10 0.519043 8.20914 0.519043 6C0.519043 3.79086 2.3099 2 4.51904 2C5.99961 2 7.2923 2.8044 7.98391 4H4.51904C3.41447 4 2.51904 4.89543 2.51904 6C2.51904 7.10457 3.41447 8 4.51904 8H7.98391Z" fill="#555D61"/>
+</svg>

package/src/assets/svgIcons/resizer.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L26 26H0V0Z" fill="#0068DE"/>
+<line x1="12.4823" y1="20.4854" x2="4.70417" y2="12.7072" stroke="white" stroke-linecap="round"/>
+<line x1="8.94524" y1="21.1924" x2="3.99549" y2="16.2427" stroke="white" stroke-linecap="round"/>
+</svg>

package/src/assets/svgIcons/roof_layer.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 10 L7 0 L14 10" fill="none" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/rotate_tool.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.29139 3.74172L0 8.03973L4.29801 12.3311L8.59603 8.03973L4.29139 3.74172ZM1.87417 8.03973L4.29801 5.61589L6.71523 8.03973L4.29139 10.4636L1.87417 8.03973ZM12.2517 3.89404C11.0927 2.72848 9.56291 2.1457 8.03973 2.1457V0L5.23179 2.80795L8.03973 5.61589V3.4702C9.22516 3.4702 10.4106 3.92053 11.3179 4.82781C13.1258 6.63576 13.1258 9.57616 11.3179 11.3841C10.4106 12.2914 9.22516 12.7417 8.03973 12.7417C7.39735 12.7417 6.75497 12.6026 6.15894 12.3377L5.17218 13.3245C6.06622 13.8146 7.05298 14.0662 8.03973 14.0662C9.56291 14.0662 11.0927 13.4834 12.2517 12.3179C14.5828 9.99338 14.5828 6.21854 12.2517 3.89404Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/ruler_tool.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.43143 0C3.19316 0 3 0.202195 3 0.451614V13.5484C3 13.7978 3.19316 14 3.43143 14H9.56857C9.80684 14 10 13.7978 10 13.5484L10 12H7V11H10V9H6V8H10V6H7V5H10V3H6V2H10L10 0.451613C10 0.202194 9.80684 0 9.56857 0H3.43143Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/trim_tool.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" width="1.5" height="11" fill="#263238"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 2V3.5L0 3.5V2H3ZM12 2V3.5V9H10.5L10.5 3.5L5 3.5V2H10.5H12ZM10.5 14H12V11.5H14V10L2 10L2 11.5L10.5 11.5V14Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/undo.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.48096 2H3.48096V4H9.48096V2Z" fill="white"/>
+<path d="M9.48096 8H5.48096V10H9.48096V8Z" fill="white"/>
+<path d="M3.48096 5.92321L0.519349 2.96161L3.48096 0L3.48096 5.92321Z" fill="white"/>
+<path d="M6.01609 8C6.70771 9.1956 8.00039 10 9.48096 10C11.6901 10 13.481 8.20914 13.481 6C13.481 3.79086 11.6901 2 9.48096 2C8.00039 2 6.7077 2.8044 6.01609 4H9.48096C10.5855 4 11.481 4.89543 11.481 6C11.481 7.10457 10.5855 8 9.48096 8H6.01609Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/vertical_tool.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.96161 0L10.9232 3.96161L7.96713 3.96161V6.55264L12.3875 9.0786L14 10L12.3875 10.9214L7 14L1.61245 10.9214L0 10L1.61245 9.0786L5.99272 6.57559V3.96161L3 3.96161L6.96161 0ZM5.99272 8.41839L3.2249 10L7 12.1572L10.7751 10L7.96713 8.39545V9.78795H5.99272V8.41839Z" fill="white"/>
+</svg>