image

  • フォト Amazonギフト券
    ※この時計の時刻は、閲覧しているパソコンのものであり、必ずしも正確な時間とは限りません

検索

最近のトラックバック

無料ブログはココログ

« ピックアップ: RubyでNotesのメールを書き出す,jQuery 1.2登場, etc... | トップページ | ピックアップ:Google版パワーポイント, アップル広報に説教された, etc... »

2007-09-15

xfy/xvcd の svg で Drag & Drop を扱う

Svgdnd

以前 マウス移動、クリックを svg であつかってみた。
今回は Drag & Drop を扱う実験もしてみた。

参考にしたのは次のページ。
- http://www.xfy.com/jp/manual/dev/developer/1.5/howto/draganddrop.html
   ドラッグ&ドロップ処理の記述手順 - xfy technology

ドッラッグしている最中の表示をカスタマイズしようとおもったが、そこまではまだ出来ていない。

ここでは、3つの SVG エリアを用意している。

円は、それぞれのエリア中だけに限らず、別エリア間でも Drop で円を移動できる。
円を、黒い四角エリアにドロップすると、その円は消える。
(MacOSX では) Option キーを押しながら Drag & Drop すると 円がコピーされる。

でも、コードが長過ぎ。もっと簡潔に書ける方法がないかなぁ。
(今回は ファイルも添付する)
「xfeyes2.xml」をダウンロード
「xfeyes2.xvcd」をダウンロード
$ cat xfeyes2.xml
<?xml version="1.0"?>
<!--
  円を Drag&Drop して、異なる svg 領域間を移動できる。
  Opt キーを押しながら Drag&Drop すると 円をコピーする。
  四角上に Drop すると、削除される。
  See  - http://www.xfy.com/jp/manual/dev/developer/1.5/howto/draganddrop.html
        ドラッグ&ドロップ処理の記述手順 - xfy technology
-->
<?com.xfy vocabulary-connection href="xfeyes2.xvcd" ?>
<eyes:root xmlns:eyes="http://xmlns.xfytec.com/samples/xfeyes">
    <eyes:area name="area-1">
        <eyes:eye x="30.0" y="30.0" color="red" />
    </eyes:area>
    <eyes:area name="area-2">
        <eyes:eye x="30" y="30" color="blue" />
        <eyes:dust-box x="60" y="60" len="30" color="black" />
    </eyes:area>
    <eyes:area name="area-3">
        <eyes:eye x="30.0" y="30.0" color="green" />
    </eyes:area>
</eyes:root>

$ cat xfeyes2.xvcd
<?xml version="1.0"?>

<!--
   2007-09-15 katoy
-->
<xvcd:xvcd version="1.0" exclude-result-prefixes="#all" xmlns="http://www.w3.org/1999/xhtml" xmlns:eyes="http://xmlns.xfytec.com/samples/xfeyes" xmlns:function="http://xmlns.xfy.com/function" xmlns:event="http://xmlns.xfy.com/event" xmlns:inst="http://xmlns.xfy.com/instruction" xmlns:xvcd="http://xmlns.xfy.com/xvcd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:dtf="http://xmlns.xfy.com/data-transfer">
  <!-- 定数 -->
  <xvcd:variable name="WIDTH" select="'300'" />
  <xvcd:variable name="HEIGHT" select="'100'" />
  <xvcd:variable name="radiusS" select="'20'" />
  <xvcd:vocabulary name="xfeyes" match="eyes:root" call-template="root" />
  <!-- ===== コマンド  ========================== -->
  <xvcd:command name="Move">
    <inst:param name="event" />
    <inst:param name="src" />
    <inst:param name="to" />
    <inst:variable name="x" select="$event/event:*/@component-x" />
    <inst:variable name="y" select="$event/event:*/@component-y" />
    <inst:choose>
      <inst:when test="$to/@name = $src/../@name">
        <inst:if test="$x &gt; 0 and $x &lt; $WIDTH and $y &gt; 0 and $y &lt; $HEIGHT">
          <xvcd:set-attribute select="$src" name="x" value="{$x}" />
          <xvcd:set-attribute select="$src" name="y" value="{$y}" />
        </inst:if>
        <xvcd:delete select="$src/@src" />
      </inst:when>
      <inst:otherwise>
        <xvcd:insert ref="$to" position="first-child">
          <xvcd:copy-of select="$src" />
        </xvcd:insert>
        <inst:variable name="new-elem" select="$to/eyes:eye[1]" />
        <xvcd:set-attribute select="$new-elem" name="x" value="{$x}" />
        <xvcd:set-attribute select="$new-elem" name="y" value="{$y}" />
        <xvcd:delete select="$new-elem/@src" />
        <xvcd:delete select="$src" />
      </inst:otherwise>
    </inst:choose>
  </xvcd:command>
  <xvcd:command name="Copy">
    <inst:param name="event" />
    <inst:param name="src" />
    <inst:param name="to" />
    <inst:variable name="x" select="$event/event:*/@component-x" />
    <inst:variable name="y" select="$event/event:*/@component-y" />
    <inst:if test="$x &gt; 0 and $x &lt; $WIDTH and $y &gt; 0 and $y &lt; $HEIGHT">
      <xvcd:insert ref="$to" position="first-child">
        <xvcd:copy-of select="$src" />
      </xvcd:insert>
      <inst:variable name="new-elem" select="$to/eyes:eye[1]" />
      <xvcd:set-attribute select="$new-elem" name="x" value="{$x}" />
      <xvcd:set-attribute select="$new-elem" name="y" value="{$y}" />
      <xvcd:delete select="$new-elem/@src" />
      <xvcd:delete select="$src/@src" />
    </inst:if>
  </xvcd:command>
  <!-- ==== テンプレート =========================== -->
  <xvcd:template name="root">
    <html>
    <body bgcolor="gray">
      <hr />
      <div>
        <xvcd:apply-templates />
      </div>
      <hr />
    </body>
    </html>
  </xvcd:template>
  <xvcd:template match="eyes:area">
    <svg:svg width="{$WIDTH}" height="{$HEIGHT}">
      <svg:rect x="1" y="1" width="{$WIDTH}" height="{$HEIGHT}" style="fill:white;" />
      <xvcd:action event="event:drop-target[dtf:fragment/.]">
        <inst:param name="event:event" />
        <inst:variable name="target" select="$event:event/event:drop-target" />
        <inst:if test="$target/@type = 'drag-enter'">
          <!-- DROP_DRAG_ENTERイベントに対する処理が必要ならば、ここに記述します。-->
        </inst:if>
        <inst:if test="$target/@type = 'drag-over'">
          <!-- DROP_DRAG_OVERイベントに対する処理が必要ならば、ここに記述します。-->
        </inst:if>
        <inst:if test="$target/@type = 'drag-exit'">
          <!-- DROP_DRAG_EXITイベントに対する処理が必要ならば、ここに記述します。-->
        </inst:if>
        <inst:if test="$target/@type = 'drop'">
          <inst:if test="$target/@action = 'copy'">
            <!-- ドロップ成功時のコピーの処理を記述します。-->
            <inst:call name="Copy">
              <inst:with-param name="event" select="$event:event" />
              <inst:with-param name="src" select="//eyes:eye[@src='drag']" />
              <inst:with-param name="to" select="." />
            </inst:call>
          </inst:if>
          <inst:if test="$target/@action = 'move'">
            <!-- ドロップ成功時の移動の処理を記述します。-->
            <inst:call name="Move">
              <inst:with-param name="event" select="$event:event" />
              <inst:with-param name="src" select="//eyes:eye[@src='drag']" />
              <inst:with-param name="to" select="." />
            </inst:call>
          </inst:if>
        </inst:if>
      </xvcd:action>
      <xvcd:apply-templates />
    </svg:svg>
  </xvcd:template>
  <xvcd:template match="eyes:eye">
    <!-- 円の表示 -->
    <svg:g>
      <svg:circle cx="{@x}" cy="{@y}" r="{$radiusS}" style="fill:{@color};     stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:2;stroke-linecap:butt;     stroke-linejoin:miter;fill-opacity:1;     fill-rule:nonzero;">
      </svg:circle>
      <xvcd:action event="event:drag-source">
        <inst:param name="event:event" />
        <inst:variable name="source" select="$event:event/event:drag-source" />
        <inst:if test="$source/@type = 'gesture'">
          <xvcd:start-drag event="$event:event">
            <!--
                ドラッグされるXML文書フラグメントの取得手続きや、
                新規のXML文書フラグメントなどを記述します。
            -->
            <xvcd:copy-of select="." />
          </xvcd:start-drag>
        </inst:if>
        <inst:if test="$source/@type = 'drag-enter'">
          <!-- DRAG_DRAG_ENTERイベントに対する処理が必要ならば、ここに記述します。-->
          <xvcd:set-attribute select="." name="src" value="drag" />
        </inst:if>
        <inst:if test="$source/@type = 'drag-over'">
          <!-- DRAG_DRAG_OVERイベントに対する処理が必要ならば、ここに記述します。-->
        </inst:if>
        <inst:if test="$source/@type = 'drag-exit'">
          <!-- DRAG_DRAG_EXITイベントに対する処理が必要ならば、ここに記述します。-->
        </inst:if>
        <inst:if test="$source/@type = 'drop-end'">
          <inst:if test="$source/@result = 'success'">
            <inst:if test="$source/@action = 'copy'">
              <!-- ドロップ成功時のコピーの処理を記述します。 -->
            </inst:if>
            <inst:if test="$source/@action='move'">
              <!-- ドロップ成功時の移動の処理を記述します。 -->
            </inst:if>
          </inst:if>
        </inst:if>
      </xvcd:action>
    </svg:g>
  </xvcd:template>
  <xvcd:template match="eyes:dust-box">
    <!-- 正方形の表示 -->
    <svg:g>
      <svg:rect x="{@x - @len * 0.5}" y="{@y - @len * 0.5}" width="{@len}" height="{@len}" style="fill:{@color};     stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:2;stroke-linecap:butt;     stroke-linejoin:miter;fill-opacity:1;     fill-rule:nonzero;">
      </svg:rect>
      <xvcd:action event="event:drop-target[dtf:fragment/.]">
        <inst:param name="event:event" />
        <inst:variable name="target" select="$event:event/event:drop-target" />
        <inst:if test="$target/@type = 'drag-enter'">
          <!-- DROP_DRAG_ENTERイベントに対する処理が必要ならば、ここに記述します。-->
        </inst:if>
        <inst:if test="$target/@type = 'drag-over'">
          <!-- DROP_DRAG_OVERイベントに対する処理が必要ならば、ここに記述します。-->
        </inst:if>
        <inst:if test="$target/@type = 'drag-exit'">
          <!-- DROP_DRAG_EXITイベントに対する処理が必要ならば、ここに記述します。-->
        </inst:if>
        <inst:if test="$target/@type = 'drop'">
          <!--
      <inst:message-box>
        delete &#xa;
        <xvcd:value-of select="function:dom-to-xml-string(//eyes:eye[@src='drag'])"/>
      </inst:message-box>
-->
          <xvcd:delete select="//eyes:eye[@src='drag']" />
        </inst:if>
      </xvcd:action>
    </svg:g>
  </xvcd:template>
</xvcd:xvcd>

« ピックアップ: RubyでNotesのメールを書き出す,jQuery 1.2登場, etc... | トップページ | ピックアップ:Google版パワーポイント, アップル広報に説教された, etc... »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/184434/16457408

この記事へのトラックバック一覧です: xfy/xvcd の svg で Drag & Drop を扱う:

« ピックアップ: RubyでNotesのメールを書き出す,jQuery 1.2登場, etc... | トップページ | ピックアップ:Google版パワーポイント, アップル広報に説教された, etc... »

mokuji

2013年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

google

  • twitter
  • __
  • _
    Googleボットチェッカー

合わせて読む

  • 合わせて読む
    フィードメーター - katoy: cocolog あわせて読みたい

リンク