why broken css style?

[rurusyu]

Version

1.2.0

Development Environment

MAC OS Mojave

Current Behavior

<template>
  <ImageEditor :options="options"
                ref="tuiImageEditor"
                @addText="onAddText"
                @objectMoved="onObjectMoved"
  ></ImageEditor>
</template>

<script>
import 'tui-image-editor/dist/tui-image-editor.css';
import {ImageEditor} from '@toast-ui/vue-image-editor';
import icon_a from "tui-image-editor/dist/svg/icon-a.svg";
import icon_b from "tui-image-editor/dist/svg/icon-b.svg";
import icon_c from "tui-image-editor/dist/svg/icon-c.svg";
import icon_d from "tui-image-editor/dist/svg/icon-d.svg";

export default {
    components: {
        ImageEditor,
    },
    data() {
        return {
            useDefaultUI: false,
            options: { // for tui-image-editor component's "options" prop
                cssMaxWidth: document.documentElement.clientWidth,
                cssMaxHeight: document.documentElement.clientHeight,
                
                selectionStyle: {
                  cornerSize: 50,
                  rotatingPointOffset: 70
                },

                includeUI : {             
                    initMenu: "filter",
                    menuBarPosition: "bottom",
                    uiSize:{
                        width: "100%",
                        height: "800px",
                    },
                    theme: theme,
                    locale: locale_ko,
                },
                resizeInfo: {
                    uiSize: {
                        width: "500px",
                        height: "500px",
                    },
                    imageSize:{
                        oldWidth: 100,
                        oldHeight: 100,
                        newWidth: 700,
                        newHeight: 700,
                    }
                }
            }
        };
    },
   
}
</script>

// Write example code

Expected Behavior

I loaded picture simply. but why broken css style??

why difference style between nhn and me??

[ryuckel]

I think you can resolve this issue by importing css style of color picker.
Please try importing like below.

import "tui-color-picker/dist/tui-color-picker.css";

[rurusyu]

thank you @ryuckel . almost issue was resolved. but, cornerSize icon was not changed..
how to change cornerSize icon do you know?? @ryuckel

[ryuckel]

@rurusyu
Good. How about editing selectionStyle object like below?
selectionStyle: { cornerSize: 50, rotatingPointOffset: 70 },

[rurusyu]

thank you for appreciate. ^^ have a nice day~! @ryuckel

[UlloaDP]

Hi, i have a problem with the css style in the corner size, but it shows up when i load an image.
It looks too small

I tried editing the selectionStyle but it didn't work for me

[swtalk]

Dooray! 메일 발송 실패 안내 메일 발송 실패 안내 박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다. 실패 사유를 확인해보세요. * 받는 사람 :  박시우(viewrain@nhn.com) * 발송 시간 :  2020-09-30T23:20:35 * 메일 제목 :  Re: [nhn/toast-ui.vue-image-editor] why broken css style? (#35) * 실패 사유 :  받는 사람이 회원님의 메일을 수신차단 하였습니다. 이 메일은 발신전용으로 회신되지 않습니다. 더 궁금하신 사항은 dooray@nhn.com 으로 문의해 주시기 바랍니다. © Dooray!.