Change default tool colors

[DaveSweeton]

Version

3.7.0

Development Environment

Firefox, Windows

Current Behavior

The default colors for tools like text and draw shape that allow users to draw are hard coded.

E.g. tui.image-editor/src/js/ui/text.js line 33 hard codes the color as #ffbb3b.

Expected Behavior

I would like an option to override all of the default colors.

I can change colors for programmatic drawing operations, but I want to change the defaults for user drawing operations.

[junghwan-park]

@DaveSweeton Thank you for recommendation. I'll consider adding 'defaultColor' option with my team.

[CremaLuca]

I'd need this too

[A113n1003]

also need，so do we have a schedule or it's already on some dev branch?

[marioviana]

This is something that makes sense for us too, this is going forward?

[Romain-Boudot]

Do we have news about this issue?

[phwiget]

Hi there, just proposed this functionality in pull request #452

Usage:

var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
             includeUI: {
                 loadImage: {
                     path: 'img/sampleImage2.png',
                     name: 'SampleImage'
                 },
                 theme: blackTheme, // or whiteTheme
                 initMenu: 'filter',
                 menuBarPosition: 'bottom',
                 draw: {
                     color: '#00a9ff',
                     opacity: 1.0,
                     range: {
                         value: 8
                     }
                 },
                 text : {
                     color: '#00a9ff',
                     range: {
                         value: 28
                     }

                 },
                 icon : {
                     color: '#00a9ff'
                 },
                 shape : {
                     stroke: '#00a9ff'
                 }
             },
             cssMaxWidth: 700,
             cssMaxHeight: 500,
             usageStatistics: false
         });

Hope this helps!

[joaquinabenza]

I also need this feature

[PQALAB]

I found a workaround, I'm using the react library and loading the image when my component mounts. Within that action I found out you can set the values then "activate" the menu.

editor is a react ref but you should be able to get it with plain JS too.

var editor = this.editorRef.current.imageEditorInst
editor.ui.shape.options.stroke = "#ff0000"
editor.ui.shape._els.strokeColorpicker._color = "#ff0000"
editor.ui.shape.colorPickerControls[1].colorElement.style.backgroundColor = "#ff0000"
editor.ui.text.colorPickerInputBox.defaultValue = "#ff0000"
editor.ui.text._els.color = "#ff0000"
editor.ui.text._els.textColorpicker.color = "#ff0000"
editor.ui.text._els.textColorpicker.colorElement.style.backgroundColor = "#ff0000"
editor.ui.activeMenuEvent()```

[devhemmy]

a workaround this, is to make use of the startDrawingMode method

so you can create your own color picker or use the tui color picker and then invoke the StartDrawingMode method using your own function, here is how I do it in Vue (Nuxt.js)

<MyColorPicker @colorPicked="startDrawing" />

<tui-image-editor ref="imageEditor">
</tui-image-editor>

startDrawing({ color, drawStyle, size }) {
      this.$refs.imageEditor.invoke('stopDrawingMode')
      this.$refs.imageEditor.invoke('startDrawingMode', drawStyle, {
        width: size,
        color,
      })
    }

drawStyle can be 'FREE_DRAWING' or 'LINE_DRAWING'

this code is in Vue (Nuxt.js) but I believe it is fairly similar it React

[fa-sibasis-behera]

@junghwan-park Any update regarding to set the default color for drawing and other menu items ,for example initMenu. We are expecting a solution like this format initColor: ' ' . It would be really appreciated if we get a solution as soon as possible.