BaekRyang fed9dc7606 feat: Add editor UI toggle functionality
- 캔버스 편집 UI 표시/숨김 기능을 추가했습니다.
- 에디터 툴바에 토글 버튼을 추가하여 UI 표시 상태를 제어할 수 있습니다.
- 에디터 UI가 숨겨졌을 때 캔버스에 마우스 이벤트가 전달되지 않도록 수정했습니다.
2025-11-05 11:52:33 +09:00

1 line
10 KiB
Plaintext

{"version":3,"sources":["../src/editor/editor.css"],"sourcesContent":["/* Distortion Editor 메인 레이아웃 */\n.distortion-editor {\n\tfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n\tbackground: #1e1e1e;\n\tcolor: #e0e0e0;\n\tmin-height: 100vh;\n\tpadding: 20px;\n}\n\n/* 에디터 툴바 */\n.editor-toolbar {\n\tmax-width: 1600px;\n\tmargin: 0 auto 16px;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tgap: 12px;\n}\n\n.editor-toggle-btn {\n\tpadding: 10px 20px;\n\tbackground: #383838;\n\tcolor: #e0e0e0;\n\tborder: 2px solid #555;\n\tborder-radius: 6px;\n\tfont-size: 14px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.editor-toggle-btn:hover {\n\tbackground: #404040;\n\tborder-color: #00aaff;\n}\n\n.editor-toggle-btn.active {\n\tbackground: #2d5a7a;\n\tborder-color: #00aaff;\n\tcolor: #fff;\n}\n\n.editor-main {\n\tdisplay: flex;\n\tgap: 20px;\n\tmax-width: 1600px;\n\tmargin: 0 auto;\n}\n\n.editor-canvas-container {\n\tflex: 1;\n\tbackground: #2a2a2a;\n\tborder-radius: 8px;\n\tpadding: 20px;\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n.editor-canvas {\n\tposition: relative;\n\tbackground: #000;\n\tborder-radius: 4px;\n\toverflow: hidden;\n\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);\n}\n\n.editor-sidebar {\n\twidth: 320px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n}\n\n/* Area List */\n.area-list {\n\tbackground: #2a2a2a;\n\tborder-radius: 8px;\n\tpadding: 16px;\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n.area-list-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 12px;\n}\n\n.area-list-header h3 {\n\tmargin: 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: #fff;\n}\n\n.btn-add {\n\tpadding: 6px 12px;\n\tbackground: #00aaff;\n\tcolor: white;\n\tborder: none;\n\tborder-radius: 4px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: background 0.2s;\n}\n\n.btn-add:hover:not(:disabled) {\n\tbackground: #0088cc;\n}\n\n.btn-add:disabled {\n\tbackground: #555;\n\tcursor: not-allowed;\n\topacity: 0.5;\n}\n\n.area-list-items {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmax-height: 300px;\n\toverflow-y: auto;\n}\n\n.area-list-empty {\n\ttext-align: center;\n\tcolor: #888;\n\tpadding: 20px;\n\tfont-size: 13px;\n}\n\n.area-item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 10px 12px;\n\tbackground: #383838;\n\tborder-radius: 4px;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\tborder: 2px solid transparent;\n}\n\n.area-item:hover {\n\tbackground: #404040;\n}\n\n.area-item.selected {\n\tbackground: #2d5a7a;\n\tborder-color: #00aaff;\n}\n\n.area-item-info {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n}\n\n.area-item-name {\n\tfont-size: 14px;\n\tfont-weight: 500;\n\tcolor: #fff;\n}\n\n.area-item-strength {\n\tfont-size: 12px;\n\tcolor: #aaa;\n}\n\n.btn-remove {\n\twidth: 24px;\n\theight: 24px;\n\tbackground: #ff4444;\n\tcolor: white;\n\tborder: none;\n\tborder-radius: 4px;\n\tfont-size: 18px;\n\tline-height: 1;\n\tcursor: pointer;\n\ttransition: background 0.2s;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.btn-remove:hover {\n\tbackground: #cc0000;\n}\n\n/* Parameter Panel */\n.parameter-panel {\n\tbackground: #2a2a2a;\n\tborder-radius: 8px;\n\tpadding: 16px;\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n\tflex: 1;\n\toverflow-y: auto;\n}\n\n.parameter-panel h3 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: #fff;\n}\n\n.parameter-panel-empty {\n\ttext-align: center;\n\tcolor: #888;\n\tpadding: 40px 20px;\n\tfont-size: 13px;\n}\n\n.parameter-group {\n\tmargin-bottom: 20px;\n}\n\n.parameter-group label {\n\tdisplay: block;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: #ccc;\n\tmargin-bottom: 8px;\n}\n\n.slider {\n\twidth: 100%;\n\theight: 6px;\n\tborder-radius: 3px;\n\tbackground: #444;\n\toutline: none;\n\t-webkit-appearance: none;\n}\n\n.slider::-webkit-slider-thumb {\n\t-webkit-appearance: none;\n\tappearance: none;\n\twidth: 16px;\n\theight: 16px;\n\tborder-radius: 50%;\n\tbackground: #00aaff;\n\tcursor: pointer;\n\ttransition: background 0.2s;\n}\n\n.slider::-webkit-slider-thumb:hover {\n\tbackground: #0088cc;\n}\n\n.slider::-moz-range-thumb {\n\twidth: 16px;\n\theight: 16px;\n\tborder-radius: 50%;\n\tbackground: #00aaff;\n\tcursor: pointer;\n\tborder: none;\n\ttransition: background 0.2s;\n}\n\n.slider::-moz-range-thumb:hover {\n\tbackground: #0088cc;\n}\n\n.input-number {\n\twidth: 100%;\n\tpadding: 8px;\n\tbackground: #383838;\n\tborder: 1px solid #555;\n\tborder-radius: 4px;\n\tcolor: #fff;\n\tfont-size: 14px;\n\toutline: none;\n\ttransition: border-color 0.2s;\n}\n\n.input-number:focus {\n\tborder-color: #00aaff;\n}\n\n.select {\n\twidth: 100%;\n\tpadding: 8px;\n\tbackground: #383838;\n\tborder: 1px solid #555;\n\tborder-radius: 4px;\n\tcolor: #fff;\n\tfont-size: 14px;\n\toutline: none;\n\tcursor: pointer;\n\ttransition: border-color 0.2s;\n}\n\n.select:focus {\n\tborder-color: #00aaff;\n}\n\n.points-display {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1fr;\n\tgap: 8px;\n\tmargin-top: 8px;\n}\n\n.point-coord {\n\tpadding: 8px;\n\tbackground: #383838;\n\tborder-radius: 4px;\n\tfont-size: 11px;\n\tfont-family: 'Courier New', monospace;\n\tcolor: #aaa;\n}\n\n/* Point Handle */\n.point-handle {\n\tz-index: 10;\n\ttransition: transform 0.1s, box-shadow 0.1s;\n}\n\n.point-handle:hover {\n\ttransform: translate(-50%, -50%) scale(1.2);\n\tbox-shadow: 0 4px 8px rgba(0, 170, 255, 0.5);\n}\n\n.point-handle.dragging {\n\tcursor: grabbing;\n\ttransform: translate(-50%, -50%) scale(1.3);\n\tbox-shadow: 0 6px 12px rgba(0, 170, 255, 0.7);\n}\n\n/* 스크롤바 스타일 */\n.area-list-items::-webkit-scrollbar,\n.parameter-panel::-webkit-scrollbar {\n\twidth: 8px;\n}\n\n.area-list-items::-webkit-scrollbar-track,\n.parameter-panel::-webkit-scrollbar-track {\n\tbackground: #1e1e1e;\n\tborder-radius: 4px;\n}\n\n.area-list-items::-webkit-scrollbar-thumb,\n.parameter-panel::-webkit-scrollbar-thumb {\n\tbackground: #555;\n\tborder-radius: 4px;\n}\n\n.area-list-items::-webkit-scrollbar-thumb:hover,\n.parameter-panel::-webkit-scrollbar-thumb:hover {\n\tbackground: #666;\n}\n\n/* 반응형 */\n@media (max-width: 1200px) {\n\t.editor-main {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-sidebar {\n\t\twidth: 100%;\n\t\tflex-direction: row;\n\t}\n\n\t.area-list,\n\t.parameter-panel {\n\t\tflex: 1;\n\t}\n}\n\n@media (max-width: 768px) {\n\t.editor-sidebar {\n\t\tflex-direction: column;\n\t}\n\n\t.points-display {\n\t\tgrid-template-columns: 1fr;\n\t}\n}\n"],"mappings":";AACA,CAAC;AACA;AAAA,IAAa,aAAa;AAAA,IAAE,kBAAkB;AAAA,IAAE,UAAU;AAAA,IAAE,MAAM;AAAA,IAAE;AACpE,cAAY;AACZ,SAAO;AACP,cAAY;AACZ,WAAS;AACV;AAGA,CAAC;AACA,aAAW;AACX,UAAQ,EAAE,KAAK;AACf,WAAS;AACT,mBAAiB;AACjB,OAAK;AACN;AAEA,CAAC;AACA,WAAS,KAAK;AACd,cAAY;AACZ,SAAO;AACP,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,aAAW;AACX,eAAa;AACb,UAAQ;AACR,cAAY,IAAI;AAChB,WAAS;AACT,eAAa;AACb,OAAK;AACN;AAEA,CAfC,iBAeiB;AACjB,cAAY;AACZ,gBAAc;AACf;AAEA,CApBC,iBAoBiB,CAAC;AAClB,cAAY;AACZ,gBAAc;AACd,SAAO;AACR;AAEA,CAAC;AACA,WAAS;AACT,OAAK;AACL,aAAW;AACX,UAAQ,EAAE;AACX;AAEA,CAAC;AACA,QAAM;AACN,cAAY;AACZ,iBAAe;AACf,WAAS;AACT,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACtC;AAEA,CAAC;AACA,YAAU;AACV,cAAY;AACZ,iBAAe;AACf,YAAU;AACV,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC;AAEA,CAAC;AACA,SAAO;AACP,WAAS;AACT,kBAAgB;AAChB,OAAK;AACN;AAGA,CAAC;AACA,cAAY;AACZ,iBAAe;AACf,WAAS;AACT,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACtC;AAEA,CAAC;AACA,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,iBAAe;AAChB;AAEA,CAPC,iBAOiB;AACjB,UAAQ;AACR,aAAW;AACX,eAAa;AACb,SAAO;AACR;AAEA,CAAC;AACA,WAAS,IAAI;AACb,cAAY;AACZ,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,aAAW;AACX,eAAa;AACb,UAAQ;AACR,cAAY,WAAW;AACxB;AAEA,CAZC,OAYO,MAAM,KAAK;AAClB,cAAY;AACb;AAEA,CAhBC,OAgBO;AACP,cAAY;AACZ,UAAQ;AACR,WAAS;AACV;AAEA,CAAC;AACA,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,cAAY;AACZ,cAAY;AACb;AAEA,CAAC;AACA,cAAY;AACZ,SAAO;AACP,WAAS;AACT,aAAW;AACZ;AAEA,CAAC;AACA,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,WAAS,KAAK;AACd,cAAY;AACZ,iBAAe;AACf,UAAQ;AACR,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM;AACnB;AAEA,CAZC,SAYS;AACT,cAAY;AACb;AAEA,CAhBC,SAgBS,CAAC;AACV,cAAY;AACZ,gBAAc;AACf;AAEA,CAAC;AACA,WAAS;AACT,kBAAgB;AAChB,OAAK;AACN;AAEA,CAAC;AACA,aAAW;AACX,eAAa;AACb,SAAO;AACR;AAEA,CAAC;AACA,aAAW;AACX,SAAO;AACR;AAEA,CAAC;AACA,SAAO;AACP,UAAQ;AACR,cAAY;AACZ,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,aAAW;AACX,eAAa;AACb,UAAQ;AACR,cAAY,WAAW;AACvB,WAAS;AACT,eAAa;AACb,mBAAiB;AAClB;AAEA,CAhBC,UAgBU;AACV,cAAY;AACb;AAGA,CAAC;AACA,cAAY;AACZ,iBAAe;AACf,WAAS;AACT,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,QAAM;AACN,cAAY;AACb;AAEA,CATC,gBASgB;AAChB,UAAQ,EAAE,EAAE,KAAK;AACjB,aAAW;AACX,eAAa;AACb,SAAO;AACR;AAEA,CAAC;AACA,cAAY;AACZ,SAAO;AACP,WAAS,KAAK;AACd,aAAW;AACZ;AAEA,CAAC;AACA,iBAAe;AAChB;AAEA,CAJC,gBAIgB;AAChB,WAAS;AACT,aAAW;AACX,eAAa;AACb,SAAO;AACP,iBAAe;AAChB;AAEA,CAAC;AACA,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY;AACZ,WAAS;AACT,sBAAoB;AACrB;AAEA,CATC,MASM;AACN,sBAAoB;AACpB,cAAY;AACZ,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY;AACZ,UAAQ;AACR,cAAY,WAAW;AACxB;AAEA,CApBC,MAoBM,sBAAsB;AAC5B,cAAY;AACb;AAEA,CAxBC,MAwBM;AACN,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY;AACZ,UAAQ;AACR,UAAQ;AACR,cAAY,WAAW;AACxB;AAEA,CAlCC,MAkCM,kBAAkB;AACxB,cAAY;AACb;AAEA,CAAC;AACA,SAAO;AACP,WAAS;AACT,cAAY;AACZ,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,SAAO;AACP,aAAW;AACX,WAAS;AACT,cAAY,aAAa;AAC1B;AAEA,CAZC,YAYY;AACZ,gBAAc;AACf;AAEA,CAAC;AACA,SAAO;AACP,WAAS;AACT,cAAY;AACZ,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,SAAO;AACP,aAAW;AACX,WAAS;AACT,UAAQ;AACR,cAAY,aAAa;AAC1B;AAEA,CAbC,MAaM;AACN,gBAAc;AACf;AAEA,CAAC;AACA,WAAS;AACT,yBAAuB,IAAI;AAC3B,OAAK;AACL,cAAY;AACb;AAEA,CAAC;AACA,WAAS;AACT,cAAY;AACZ,iBAAe;AACf,aAAW;AACX,eAAa,aAAa,EAAE;AAC5B,SAAO;AACR;AAGA,CAAC;AACA,WAAS;AACT,cAAY,UAAU,IAAI,EAAE,WAAW;AACxC;AAEA,CALC,YAKY;AACZ,aAAW,UAAU,IAAI,EAAE,MAAM,MAAM;AACvC,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;AACzC;AAEA,CAVC,YAUY,CAAC;AACb,UAAQ;AACR,aAAW,UAAU,IAAI,EAAE,MAAM,MAAM;AACvC,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAGA,CAtNC,eAsNe;AAChB,CA7IC,eA6Ie;AACf,SAAO;AACR;AAEA,CA3NC,eA2Ne;AAChB,CAlJC,eAkJe;AACf,cAAY;AACZ,iBAAe;AAChB;AAEA,CAjOC,eAiOe;AAChB,CAxJC,eAwJe;AACf,cAAY;AACZ,iBAAe;AAChB;AAEA,CAvOC,eAuOe,yBAAyB;AACzC,CA9JC,eA8Je,yBAAyB;AACxC,cAAY;AACb;AAGA,QAAO,WAAY;AAClB,GAxTA;AAyTC,oBAAgB;AACjB;AAEA,GArSA;AAsSC,WAAO;AACP,oBAAgB;AACjB;AAEA,GAlSA;AAAA,EAmSA,CA9KA;AA+KC,UAAM;AACP;AACD;AAEA,QAAO,WAAY;AAClB,GAjTA;AAkTC,oBAAgB;AACjB;AAEA,GA9EA;AA+EC,2BAAuB;AACxB;AACD;","names":[]}