How to control text selection in elm-svg ?

Ambrose Laing

unread,

Jul 17, 2015, 10:26:40 AM7/17/15

to elm-d...@googlegroups.com

Hello all,

I have a function:

placeText: Int -> Int -> String -> String -> String -> Svg
placeText xpos ypos pxSize color txt =
Svg.text
    [ x (toString xpos)
    , y (toString ypos)
    , fill color
    , fontSize pxSize
    {-
    , VirtualDom.attribute "-webkit-touch-callout" "none"
    , VirtualDom.attribute "-webkit-user-select" "none"
    , VirtualDom.attribute "-khtml-user-select" "none"
    , VirtualDom.attribute "-moz-user-select" "none"
    , VirtualDom.attribute "-ms-user-select" "none"
    -}
    , VirtualDom.attribute "user-select" "none"
    ]
    [ VirtualDom.text txt ]

[A minimal complete example using this function is in the three files
attached so you can easily run this if you want.]

It works to place text on my svg drawing area. When I drag the mouse
on the drawing area, the text is selected/highlighted. For my
application, the text should not be selected. How do I control that?
The lines involving VirtualDom.attribute were my attempts to gain
control of that, but they do not work. Advice on StackOverflow at:

http://stackoverflow.com/questions/9627732/drag-and-drop-prevent-awkward-highlighting

says another way to do this is to use a javascript function on the
"drop" event (in my case "mouse up"):

function clearSelection() {
    var sel;
    if(document.selection && document.selection.empty){
        document.selection.empty() ;
    } else if(window.getSelection) {
        sel = window.getSelection();
        if(sel && sel.removeAllRanges)
        sel.collapse();
    }
}

How can I do the equivalent in elm? The above is an imperative
action, and does not seem to fit in the elm way of doing things,
especially while using virtual-dom diffing. In that architecture, one
can specify that on mouse-up, the model should change in a certain
way, and the view function should render the new model in a certain
way. One can not say that on a mouse-up something should be done
directly. So I need a declarative way to specify properties which can
be included in the view function.

Thanks,

Ambrose

Main.elm

MySvg.elm

elm-package.json

Ambrose Laing

unread,

Jul 17, 2015, 2:06:58 PM7/17/15

to elm-d...@googlegroups.com

I resolved the problem by following the interop instructions at: http://elm-lang.org/guide/interop,

based on the idea at https://groups.google.com/forum/#!searchin/elm-discuss/CSS|sort:relevance/elm-discuss/FP5Ly4e40_4/nPtp8gZTlr8J

to include a CSS file with my project.

Basically, I ran:

elm-make MyMain.elm --output=Main.html

And then I manually edited the Main.html file's <head> entry to include my own style sheet.

And then put this into style.css:

.noselect {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

Of course I also edited my SVG function to put the text elements in the "noselect" class -- it becomes:

placeText: Int -> Int -> String -> String -> String -> Svg

placeText xpos ypos pxSize color txt =

Svg.text

[ x (toString xpos)

, y (toString ypos)

, fill color

, fontSize pxSize

, VirtualDom.attribute "class" "noselect"

]

[ VirtualDom.text txt ]

Thanks!

Jeff Smits

unread,

Jul 17, 2015, 5:01:39 PM7/17/15

to elm-discuss

Ah ok, so it's one of those styles that don't work when used with a style atribute :(
Nice that you figured it out by yourself.

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward