Динамические метаданные в DOM элементах - Продукты TerraInformatica

Здравствуйте, nullptr_t, Вы писали:

_>собственно есть ли они в htmlayout? если да, то ведь можно будет легко прикрутить, например, выделение

Что такое "Динамические метаданные" здесь?

А за для выделения:

<html>
  <body style="behavior:htmlarea; text-selection-background-color:gold;">
    Select me!
  </body>
</html>

или имеется ввиду что-то другое?

Здравствуйте, c-smile, Вы писали:

CS>или имеется ввиду что-то другое?

отловил WM_LBUTTONDOWN и WM_MOUSEMOVE, захватил, расчитал кто пересекается, пометил элементы как выделенные и изменил атрибуты. Потом отловил WM_COPY и выдал plaintext — это костыль необходимый для htmlayout мне

мне необходимо копировать отрендереное содержимое проще говоря

Здравствуйте, nullptr_t, Вы писали:

_>Здравствуйте, c-smile, Вы писали:

CS>>или имеется ввиду что-то другое?

_>отловил WM_LBUTTONDOWN и WM_MOUSEMOVE, захватил, расчитал кто пересекается, пометил элементы как выделенные и изменил атрибуты. Потом отловил WM_COPY и выдал plaintext — это костыль необходимый для htmlayout мне

Чем это в принципе отличается от

sciter/sdk/samples/ideas/rect-tracker/rect-tracker-demo.htm (смотреть в Sciter)

плюс что-нибудь типа

class RectTracker: Behavior
{
  ...
  function onKey(evt)
  {
    if( evt.type == Event.KEY_DOWN &&
        evt.ctrlKey &&
        evt.keyCode = 'C' )
        return doCopy();
  }
  function doCopy()
  {
    var str = "";
    for(var el in this.$$([covered])
       str += el.text + "\r\n"; 
    view.clipboard(#put, str );
  }
}

Аналогичный код можно воспроизвести в native behavior для htmlayout.

Этот самый RectTracker добавляет атрибут "covered" для элементов под rect.
Соотв. CSS их стилирует.

Добавление/удаление атрибута здесь:

if( max(x1,cx1) < min(x2,cx2) &&
    max(y1,cy1) < min(y2,cy2) )
    child.@#covered = true;
else
    child.@#covered = undefined;

Это и есть твои "динамические метаданные" или нет?

Здравствуйте, c-smile, Вы писали:

Полный пример в Sciter:

файл rect-tracker-demo.htm

<html>
<head>
<style>

  #cover-box
  {
    border:solid 1px green;
    background-color:lime;
    opacity:0.5;
    display:none;
  }
    
  .stuff
  {
    background:red;
    width:70px;
    height:70px;
  }
  .stuff > * {margin:5px; background:blue; height:*; color:white;}
  .stuff[selected] { background:gold; } // it is covered by the box
  
    
  div#sandbox
  {
    border:1px dashed silver;
    padding:4px;
    border-spacing:4px;
    flow:h-flow;
    height:*;
    
    prototype:RectTracker; 
  }
</style>

<script type="text/tiscript">

  include "rect-tracker.tis";
     function createSomeStuff()
    {
      self.$("div#sandbox").insert
       { div, #class:"stuff",
        [
          { div, "1" },
          { div, "2" },
          { div, "3" }
        ]
       };
    }

  self.ready = function()
    {
    for(var n = 0; n < 20; n++)
      createSomeStuff();
    }

</script>
</head>
<body>
  <p>Demonstrates rect tracking. Press and drag mouse inside the area:</p>
  <div #sandbox />
</body>
</html>

файл rect-tracker.tis

  // rect tracker implementation. 
  
  class RectTracker: Behavior
  {
    function attached()
    {
      this.cover = self.$(":root>#cover-box");
      if(!this.cover)
      {
        self.insert{div, id:"cover-box" };      
        this.cover = self.$(":root>#cover-box");
      }
    }
    function onMouse(evt)
    {
      switch(evt.type) 
      {
        case Event.MOUSE_DOWN:
          this.mouseDown = true;
          this.anchorX = evt.xView;
          this.anchorY = evt.yView;
          this.clearSelection();
          view.focus = this;
          break;
        case Event.MOUSE_MOVE | Event.SINKING:
          if(this.mouseDown)
          {
            this.capture(true);
            this.cover.move(this.anchorX, this.anchorY,
                            evt.xView - this.anchorX,
                            evt.yView - this.anchorY, #view);
                            
            this.onCoverChanged();
            return true;
          }
          break;
        case Event.MOUSE_UP:
          this.capture(false);
          this.mouseDown = false;
          this.cover.style.clear();
          break;
      }
      return false;
    }
    
    function onCoverChanged()
    {
      var (x1,y1,x2,y2) = this.cover.box(#rect, #border, #view);
      
      function max(a,b) { return a > b? a : b; }
      function min(a,b) { return a < b? a : b; }
            
      for( var child in this )
      {
        var (cx1,cy1,cx2,cy2) = child.box(#rect, #border, #view);
        child.@#selected = ( max(x1,cx1) < min(x2,cx2) && max(y1,cy1) < min(y2,cy2) )? true : undefined;
      }
    }
    
    function clearSelection()
    {
      for( var el in this.$$([selected]) )
        el.@#selected = undefined;
    }
    
    function onFocus(evt) {} // indication that it is focusable.
    
    function onKey(evt)
    {
      if( evt.type == Event.KEY_DOWN &&
          evt.ctrlKey &&
          evt.keyCode == 'C' )
          return this.selection2clipboard();
    }
    function selection2clipboard()
    {
      var str = "";
      for(var el in this.$$([selected]))
         str += el.text + "\r\n"; 
      view.clipboard(#put, str );
      return true;
    }
    
  }

эм, а в htmlayout можно тоже самое сделать? скитер тяжевесен для меня (признаюсь апи только видел, не курил)

Здравствуйте, nullptr_t, Вы писали:

_>эм, а в htmlayout можно тоже самое сделать? скитер тяжевесен для меня (признаюсь апи только видел, не курил)

Как я сказал можно и в htmlayout такое написать. class RectTracker становится native behavior и все.

А вообще Sciter это htmlayout + script. Встраивание — совершенно идентично.
tiscript.h[pp] это optional, т.е. если хватает htmlayout API то без своих классов для скрипта то tiscript.h даже и смотреть не надо.

Если нужно какую-нибудь функциональность выставить в script то см. class CMainFrame в sciter\sdk\sciter\mainfrm.h

Прописываем карту функций:

class CMainFrame ...
{
...
  // functions accessible through view.funcname() from script:
  BEGIN_FUNCTION_MAP
    FUNCTION_V("debug", method_debug)
    FUNCTION_1("shellExec", method_shellExec)
  END_FUNCTION_MAP
}

и сами функции например так

class CMainFrame ...
{
...
json::value method_shellExec(const json::value& cmd)
  {
    ShellExecuteW(0, L"open", cmd.to_string().c_str(), NULL, NULL, SW_SHOWNORMAL);
    return json::value(); // undefined, a.k.a. void value
  }
}

и всё собственно. Из скрипта их зовем так:

function launchNotepad()
{
  view.shellExec("notepad.exe"); // call of method_shellExec() on the view. 
}

Просто многие функции в скрипте делаются красивее. Ну и если не хочется исходники показывать то есть tiscript.exe которым можно их комплировать в bytecode. И включать этот bytecode в ресурсы или еще куда.

	От:	nullptr_t
	Дата:	15.10.10 19:17
	Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	15.10.10 19:46
Оценка:

	От:	nullptr_t
	Дата:	15.10.10 20:28
	Оценка:

	От:	nullptr_t
	Дата:	15.10.10 20:30
	Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	15.10.10 20:49
Оценка: