<commit_before><link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../dtile-three-renderer/dtile-three-renderer.html">
<link rel="import" href="../dtile-selection/dtile-selection.html">
<link rel="import" href="../dtile-scroll-behavior/dtile-scroll-behavior.html">
<link rel="import" href="../dtile-tile-select-behavior/dtile-tile-select-behavior.html">

<dom-module id="dtile-tileset-selector">
	<template>
		<style>
			:host {
				display: block;
				position: relative;
				width: 100%;
				height: 100%;
				background: transparent;
			}

			dtile-selection {
				z-index: 10;
			}
		</style>
		<dtile-three-renderer id="renderer" map="[[_currentTilesetMap]]"
			outline="[[outline]]" pan-x="[[panX]]" pan-y="[[panY]]"
			zoom="[[zoom]]"></dtile-three-renderer>
		<dtile-selection id="selection"></dtile-selection>
	</template>

	<script src="../../node_modules/dtile-tilemap/out/js/build.js"></script>
	<script src="../dtile-tilemap-editor/tool.js"></script>
	<script src="../dtile-tilemap-editor/select-tool.js"></script>

	<script>
		/* globals DTile, dtileTilemap, SelectTool */
		Polymer({
			is: "dtile-tileset-selector",

			properties: {
				map: Object,
				tilesetId: {
					type: Number,
					value: 0
				},
				outline: Boolean,

				selectedTileArea: {
					type: Object,
					notify: true
				},

				_currentTilesetMap: Object,
				_selectTool: {
					type: Object,
					readOnly: true,
					value: new SelectTool(true)
				}
			},

			listeners: {
				"tap": "_handleGesture",
				"track": "_handleGesture"
			},

			behaviors: [
				DTile.ScrollBehavior,
				DTile.TileSelectBehavior
			],

			observers: [
				"_updateTileset(map, tilesetId)",
				"_showSelection(previousSelection.*, currentSelection.*)"
			],

			setTileSelected(x, y, selected) {
				this.$.renderer.setTint(x, y, 0, selected ? this.$.selection.color : false);
			},

			_handleGesture(e) {
				const localPosition = this._toLocalRendererPos(e.detail);
				const tilePosition = this.$.renderer.getTileAtMouse(localPosition);

				const { shiftKey, ctrlKey } = e.detail.sourceEvent;
				const selection = this.$.selection;
<commit_msg>Implement panning on tileset selector<commit_after><link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../dtile-three-renderer/dtile-three-renderer.html">
<link rel="import" href="../dtile-selection/dtile-selection.html">
<link rel="import" href="../dtile-scroll-behavior/dtile-scroll-behavior.html">
<link rel="import" href="../dtile-tile-select-behavior/dtile-tile-select-behavior.html">
<link rel="import" href="../dtile-button-gesture-behavior/dtile-button-gesture-behavior.html">

<dom-module id="dtile-tileset-selector">
	<template>
		<style>
			:host {
				display: block;
				position: relative;
				width: 100%;
				height: 100%;
				background: transparent;
			}

			dtile-selection {
				z-index: 10;
			}
		</style>
		<dtile-three-renderer id="renderer" map="[[_currentTilesetMap]]"
			outline="[[outline]]" pan-x="[[panX]]" pan-y="[[panY]]"
			zoom="[[zoom]]"></dtile-three-renderer>
		<dtile-selection id="selection"></dtile-selection>
	</template>

	<script src="../../node_modules/dtile-tilemap/out/js/build.js"></script>
	<script src="../dtile-tilemap-editor/tool.js"></script>
	<script src="../dtile-tilemap-editor/select-tool.js"></script>

	<script>
		/* globals DTile, dtileTilemap, SelectTool */
		Polymer({
			is: "dtile-tileset-selector",

			properties: {
				map: Object,
				tilesetId: {
					type: Number,
					value: 0
				},
				outline: Boolean,

				selectedTileArea: {
					type: Object,
					notify: true
				},

				_currentTilesetMap: Object,
				_selectTool: {
					type: Object,
					readOnly: true,
					value: new SelectTool(true)
				}
			},

			listeners: {
				"tap": "_handleGesture",
				"track": "_handleGesture"
			},

			behaviors: [
				DTile.ScrollBehavior,
				DTile.ButtonGestureBehavior,
				DTile.TileSelectBehavior
			],

			observers: [
				"_updateTileset(map, tilesetId)",
				"_showSelection(previousSelection.*, currentSelection.*)"
			],

			setTileSelected(x, y, selected) {
				this.$.renderer.setTint(x, y, 0, selected ? this.$.selection.color : false);
			},

			_handleGesture(e) {
				if (e.detail.sourceEvent.button !== 0) return;

				const localPosition = this._toLocalRendererPos(e.detail);
				const tilePosition = this.$.renderer.getTileAtMouse(localPosition);

				const { shiftKey, ctrlKey } = e.detail.sourceEvent;
				const selection = this.$.selection;

{'fraction_non_alphanumeric': 0.17370272647317503, 'fraction_numerical': 0.004617414248021108, 'mean_word_length': 3.468565815324165, 'pattern_counts': {'":': 4, '<': 46, '<?xml version=': 0, '>': 46, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1787121', 'n_tokens_mistral': 1902, 'n_tokens_neox': 1541, 'n_words': 250}