- canvas setting에 이미지 표시 추가

- context menu에 이미지 크기 조절 기능 추가
This commit is contained in:
minsik 2024-10-28 18:15:01 +09:00
parent 37df5f6023
commit b48e43dd9f
2 changed files with 47 additions and 6 deletions

View File

@ -23,6 +23,7 @@ import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/Fl
import { useMessage } from '@/hooks/useMessage'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { contextMenuState } from '@/store/contextMenu'
import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
export function useContextMenu() {
const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@ -36,7 +37,7 @@ export function useContextMenu() {
const [gridColor, setGridColor] = useRecoilState(gridColorState)
const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
const { handleZoomClear } = useCanvasEvent()
const currentMenuSetting = (position) => {
const currentMenuSetting = () => {
switch (currentMenu) {
case MENU.PLAN_DRAWING:
setContextMenu([
@ -104,6 +105,11 @@ export function useContextMenu() {
id: 'wallLineRemove',
name: getMessage('contextmenu.wallline.remove'),
},
{
id: 'imageSizeEdit',
name: getMessage('modal.image.size.setting'),
component: <ImageSizeSetting id={popupId} />,
},
],
[
{
@ -170,6 +176,11 @@ export function useContextMenu() {
shortcut: ['c', 'C'],
name: `${getMessage('contextmenu.copy')}(C)`,
},
{
id: 'imageSizeEdit',
name: getMessage('modal.image.size.setting'),
component: <ImageSizeSetting id={popupId} />,
},
],
[
{

View File

@ -12,10 +12,16 @@ export const settingModalFirstOptionsState = atom({
{ id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
{ id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
{ id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
{ id: 10, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
{ id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
],
dimensionDisplay: [
{ id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: true },
{
id: 1,
column: 'corridorDimension',
name: 'modal.canvas.setting.first.option.corridor.dimension',
selected: true,
},
{ id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
{ id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
],
@ -38,10 +44,34 @@ export const settingModalSecondOptionsState = atom({
{ id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' },
],
option4: [
{ id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true, range: 10 },
{ id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false, range: 30 },
{ id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false, range: 50 },
{ id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false, range: 70 },
{
id: 1,
column: 'adsorpRangeSmall',
name: 'modal.canvas.setting.font.plan.absorption.small',
selected: true,
range: 10,
},
{
id: 2,
column: 'adsorpRangeSmallSemi',
name: 'modal.canvas.setting.font.plan.absorption.small.semi',
selected: false,
range: 30,
},
{
id: 3,
column: 'adsorpRangeMedium',
name: 'modal.canvas.setting.font.plan.absorption.medium',
selected: false,
range: 50,
},
{
id: 4,
column: 'adsorpRangeLarge',
name: 'modal.canvas.setting.font.plan.absorption.large',
selected: false,
range: 70,
},
],
},
dangerouslyAllowMutability: true,