Outline table row

Sciter Forums General discussion Outline table row

Tagged: , ,

This topic contains 10 replies, has 3 voices, and was last updated by  scorpion 1 month ago.

  • Author
    Posts
  • #51365

    scorpion
    Participant

    Hi!

    I wonder how could one outline a table row? As if “focused item” – with dashed/dotted border.
    Outline for cells is not the way, and for row itself it won’t work… See example, I need the second row to be in focus (the whole row, not individual cells).

    Thanks in advance for your advices 🙂

    <html>
    <head>
      <style type="text/css">
        table
        {
          behavior: column-resizer;
          border-spacing: 0;
        }
    
        /* borders */
        @const BORDER_GRID: solid 1dip darkgray;
        thead                         { border: @BORDER_GRID; }
        tbody:not(:empty)             { border: @BORDER_GRID; border-top: none; }
        th:not(:last-child),
        tbody td:not(:last-child)     { border-right: @BORDER_GRID; }
        tbody tr:not(:last-child) td  { border-bottom: @BORDER_GRID; }
    
        /* focus and selection */
        tr:checked  { background-image: url(theme:list-view-item-selected); }
        tr:current  { outline: dashed 1dip black -1dip; } /// <<< not working :(
    
        th, tbody td { padding: 2dip 3dip; }
    
        th { min-width: 20dip; width: max-content; background-color: threedlightshadow; }
        tfoot td { flow: horizontal; border-spacing: 4dip; padding-top: 4dip; padding-left: -1dip; }
      </style>
      <script type="text/tiscript">
        function self.ready() {
          $(tbody)[0].state.checked = true;
          $(tbody)[1].state.checked = true;
          $(tbody)[1].state.current = true; /* emulate focus by mouse or smth else */
        }
      </script>
    </head>
    <body>
      <table fixedlayout multiple>
        <thead>
          <tr> <th>#</th> <th>X (mil)</th> <th>Y (mil)</th> <th>Arc Angle (Neg = CW)</th> </tr>
        </thead>
        <tbody>
          <tr> <td>1</td> <td>3953.887</td> <td>4086.598</td> <td></td> </tr>
          <tr> <td>2</td> <td>4763.688</td> <td>3276.802</td> <td>20.292</td> </tr>
          <tr> <td>3</td> <td>4595</td>     <td>2995</td>     <td>20.292</td> </tr>
        </tbody>
        <tfoot><tr><td colspan=4><button>Add</button><button>Remove</button></td></tr></tfoot>
      </table>
    </body>
    </html>
  • #51368

    Mikanoshi
    Participant

    Outline for cells is not the way

    Paint your own outline.

    <style>
      tr:current td { aspect: selectedCell; }
    </style>
    <script type="text/tiscript">
      function selectedCell() {
        this.paintOutline = function(gfx) {
          var (l, t, r, b) = this.box(#rect, #inner, #padding);
          var (x1, x2) = (l-0.5, this.box(#width)-r+0.5);
          var (y1, y2) = (t-0.5, this.box(#height)-b+0.5);
          gfx.strokeDash(#dashed)
             .lineColor(color(0xFF,0,0))
             .lineWidth(1dip)
             .line(x1,y1,x2,y1);
          if (!this.next)
          gfx.line(x2,y1,x2,y2)
          gfx.line(x2,y2,x1,y2)
          if (!this.prior)
          gfx.line(x1,y2,x1,y1)
        }
      }
    </script>

    • This reply was modified 1 month, 1 week ago by  Mikanoshi.
  • #51370

    Andrew
    Keymaster

    It’s a bug in current version with tr {outline:...} rendering.

    Fixed by r5147

  • #51378

    scorpion
    Participant

    Got it, thanks.
    Thought it wasn’t working by design – something like mentioned at stackoverflow

    • #51379

      Andrew
      Keymaster

      Technically <tr> is not a box element – it may contain rowspan cells for example.
      Yet its box model is quite non-trivial – no margins or paddings for example.

      That’s why browsers are not bothering to render

      ‘s at all – only cells in them.
  • #51409

    scorpion
    Participant

    Spent some time on experiments, that’s what is done with styles only:
    styled outline
    Outlines are working, but I couldn’t make them fully identical on all rows (1 pixel difference from left-right for example), and while waiting border-collapse: collapse fix there is “self painted” version:
    painted outline
    It works fine, but I have some questions:

    1. doesn’t tr Element have paintOutline function (and other paint*) or calls to it? aspect for tr never called one…
    2. is there a way to customize strokeDash(#dashed) drawing? I would like it to be painted as CSS outlines do (on top – 3colored pixels, 2 empty), but what I managed to achieve is 3 colored, 1 empty (or 2 colored, 2 empty without strokeCap(#square)): dashed lines
  • #51414

    Andrew
    Keymaster

    <tr> is neither a box nor a drawable element. Attach your drawing to <tbody>.

    Yet, I’ve added support of custom dash patterns:

    Graphics.strokeDash ( dash: #solid | #dotted | #dashed | pattern: Array [, offset: float ]) : Graphics

    Stroke dash type, either one of predefined types (#solid, #dotted or #dashed) or custom pattern defined by an array whose elements (floats) are set to the length of each dash and space in the dash pattern.

    This will appear in v 4.0.1.1 and so by using

    gfx.strokeDash([3,2]);

    you will have what you want.

  • #51417

    Mikanoshi
    Participant

    How did you draw a 1px line without any antialiasing?)

  • #51418

    scorpion
    Participant

    <tr> is neither a box nor a drawable element. Attach your drawing to <tbody>.

    Got it. That’s what i did, yes (just used <table>, not <tbody>)

    I’ve added support of custom dash patterns

    Great! Thank you!

    How did you draw a 1px line without any antialiasing?)

    Used gfx.antialiasing(false); and Andrew’s advice concerning drawing lines (something could be redundant):

        function FocusableRow() {
          this.paintOutline = function(gfx) {
            var row = this.$(tbody tr:current);
            if ( !row )
              return false;
    
            var elfTD = row.$(td:first-child);
            if ( !elfTD )
              return false;
    
            function translateToSubpixel(el) {
              var pixelsPerDipX = el.toPixels(1dip, #width);
              var pixelsPerDipY = el.toPixels(1dip, #height);
              gfx.translate(pixelsPerDipX / 2.0, pixelsPerDipY / 2.0)
                 .scale(pixelsPerDipX, pixelsPerDipY);
            }
    
            var (left, top) = this.box(#position, #border, #root);
            var (ltd, ttd) = elfTD.box(#position, #border, #root);
    
            gfx.antialiasing(false);
            translateToSubpixel(this);
            gfx.translate(ltd - left + 1, ttd - top);
    
            var (l, t, r, b) = elfTD.box(#rect, #padding, #self);
            for ( var td in row.$$(td:not(:first-child)) )
              r += td.box(#width, #border, #self);
            r += elfTD.style#border-right-width;
            r -= row.$(td:last-child).style#border-right-width;
            gfx.strokeCap(#square).strokeDash(#dashed)
               .strokeColor(row.style#outline-color).strokeWidth(1dip);
            gfx.line(l,t, r,t);
            gfx.line(r,t, r,b);
            gfx.line(r,b, l,b);
            gfx.line(l,b, l,t);
    
            return false; // 
          }
        }

    P.S. @mikanoshi, just FYI: some ISPs in Russia block s01.geekpic.net fully because of one record in blocking list, so on my working PC I can’t see any of your pictures 🙂

    • #51419

      Mikanoshi
      Participant

      some ISPs in Russia block s01.geekpic.net fully because of one record in blocking list, so on my working PC I can’t see any of your pictures 🙂

      Your ISP is savage 🙂 Так-то я из России, у моего провайдера только та ссылка запрещена, а не весь s01.geekpic.net

    • #51420

      scorpion
      Participant

      🙂 Да я догадался. Просто у Андрея тут всё по-английски, так и написал) Дома провайдер отрабатывает тоже нормально, только рабочий шалит.

You must be logged in to reply to this topic.