Open bennypowers opened 6 years ago
Here's an example of some code which provides a basic version of this functionality, specific to its case.
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/the-grid/the-grid.html">
<link rel="import" href="../../bower_components/the-grid/debug-grid.html">
<dom-module id="math-canvas-app">
<template>
<the-grid id="mathPallete"
draggable
animated
cell-height="32"
cell-width="32"
cell-margin="0"
col-count="20"
row-count="20"
on-move="onMove">
<dom-repeat items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]" as="number" index-as="index">
<template>
<tile row="0" index$="[[index]]" col$="[[index]]" type="number" height="1" width="1">[[number]]</tile>
</template>
</dom-repeat>
<dom-repeat items="[[operators]]" as="operator" index-as="index">
<template>
<tile row="1" index$="[[index]]" col$="[[index]]" type="operator" height="1" width="1">[[operator]]</tile>
</template>
</dom-repeat>
</the-grid>
</template>
<script>
/**
* @customElement
* @polymer
*/
class MathCanvasApp extends Polymer.Element {
static get is() {return 'math-canvas-app';}
static get properties() {
return {
operators: {
type: Array,
value: () => [
'+',
'-',
'x',
'÷',
'=',
],
},
};
}
onMove(event) {
const tile = event.detail.tile;
const type = tile.getAttribute('type');
let clone = document.createElement('tile');
clone.setAttribute('row', type === 'number' ? 0 : 1);
clone.setAttribute('type', tile.getAttribute('type'));
clone.setAttribute('height', 1);
clone.setAttribute('width', 1);
clone.setAttribute('col', tile.getAttribute('index'));
clone.setAttribute('index', tile.getAttribute('index'));
clone.innerHTML = tile.innerHTML;
this.$.mathPallete.appendChild(clone);
tile.style.color = type === 'number' ? 'blue' : 'red';
}
}
customElements.define(MathCanvasApp.is, MathCanvasApp);
</script>
</dom-module>
@bennypowers If I understand it well, you just need some "drag start" event so you can duplicate the tile when the user starts dragging a tile. Cause currently you only have the move
event, which is kind of "drag stop". Am I right ?
Yes that sounds good
I'd like to clone tile on drag, such as in a tool pallete. The tile stays in place when dragged, and a copy is cloned to the drop location.