implemented logic of isSelected node attribute in store and cards (33417c47) · Commits · Marko Řeháček / analysis-vis-prototype

src/components/NetworkGraph/GraphNode.vue

+6 −1

Original line number	Diff line number	Diff line
		@@ -261,6 +261,8 @@ export default {
		'UNSET_NODE_HOVER'
		]),
		...mapActions('interaction', [
		'selectNode',
		'deselectNode',
		'showNodeDetail',
		'hideNodeDetail',
		'showNodeSelection',
		@@ -287,7 +289,10 @@ export default {
		// if user held the node without dragging, interpret is as a selection
		if (this.currentDragLength < 4) {
		if (this.isUserSelecting) {
		this.isSelected ? this.DESELECT_NODES([this.node.id]) : this.SELECT_NODE(this.node.id)
		//this.isSelected ? this.DESELECT_NODES([this.node.id]) : this.SELECT_NODE(this.node.id)
		// we need to set isSelected attr to the node, so we call action, not mutation
		this.isSelected ? this.deselectNode(this.node.id) : this.selectNode(this.node.id)
		//console.log('nodes', this.$store.getters['data/getNodes'])
		this.isSelected ? this.showNodeSelection() : this.hideNodeSelectionIfEmpty()
		//this.isSelected ? this.showTagCreation() : this.hideTagCreationIfEmpty()
		if (!this.isSelected) this.hideTagCreationIfEmpty()

src/components/Tools/GroupListCard.vue

+32 −7

Original line number	Diff line number	Diff line
		@@ -41,11 +41,11 @@
		checkboxes[i].isChecked = !checkboxes[i].isChecked
		checkboxes[i].isChecked
		? t.nodesWithTag.forEach(n => {
		SELECT_NODE(n.id)
		selectNode(n.id)
		checkboxes[i].selected++
		})
		: t.nodesWithTag.forEach(n => {
		DESELECT_NODES([n.id])
		deselectNode(n.id)
		checkboxes[i].selected--
		})
		"
		@@ -106,10 +106,11 @@
		</span>

		<b-icon style="vertical-align: middle;" icon="menu-down"></b-icon>
		<span
		class="alignright"
		style="float: right;"
		>{{ t.nodesWithTag.length + ' / ' + computedLinks[i].length }}</span>
		<span class="alignright" style="float: right;">
		{{
		t.nodesWithTag.length + ' / ' + computedLinks[i].length
		}}
		</span>

		<b-icon
		v-if="t.nodesWithTag.length > 1"
		@@ -176,6 +177,7 @@
		</template>

		<script>
		import Vue from 'vue'
		import { mapActions, mapGetters, mapMutations } from 'vuex'
		import { cloneDeep } from 'lodash'
		import Swatches from 'vue-swatches'
		@@ -313,6 +315,7 @@ export default {
		},

		tags() {
		//let index = 0 // if checkboxes would be a map we could just use name
		this.tags.forEach(t => {
		if (!this.checkboxes.find(ch => ch.tagName === t.name)) {
		let nodeIds = []
		@@ -332,6 +335,23 @@ export default {
		tagColor: t.color === 'none' ? '' : t.color // used for swatches
		})
		}

		/*let selectedCount = 0
		t.nodesWithTag.forEach(n => {
		if (n.isSelected) selectedCount++
		})

		console.log('fml', this.checkboxes[index])
		console.log('fml', this.checkboxes)

		// welp, I forgot with reactivity we need to do vue.set, but it's not really working for nested items
		//Vue.set(this.checkboxes[0].object('isChecked', selectedCount > 0))

		this.checkboxes[index].isIndeterminate =
		selectedCount > 0 && selectedCount < this.checkboxes[index].count
		this.checkboxes[index].isChecked = selectedCount === this.checkboxes[index].count

		index++*/
		})
		}
		},
		@@ -345,7 +365,12 @@ export default {
		'updateNodes',
		'switchTagVisibility'
		]),
		...mapActions('interaction', ['showNodeSelection', 'hideNodeSelectionIfEmpty']),
		...mapActions('interaction', [
		'selectNode',
		'deselectNode',
		'showNodeSelection',
		'hideNodeSelectionIfEmpty'
		]),
		...mapGetters('data', ['getNodes']),
		...mapMutations('interaction', [
		'SET_NODE_HIGHLIGHT',

src/components/Tools/NodesListCard.vue

+34 −14

Original line number	Diff line number	Diff line
		@@ -48,7 +48,7 @@
		:value="checkboxes[i].isChecked"
		@input="
		checkboxes[i].isChecked = !checkboxes[i].isChecked
		checkboxes[i].isChecked ? SELECT_NODE(n.id) : DESELECT_NODES([n.id])
		checkboxes[i].isChecked ? selectNode(n.id) : deselectNode(n.id)
		"
		>{{ n.label }}</b-checkbox>
		</p>
		@@ -108,16 +108,29 @@ export default {
		},

		watch: {
		nodes() {
		// TODO implement when someone removes node -> maybe not array so we can remove just one checkbox
		nodes: {
		handler() {
		let index = 0
		this.nodes.forEach(n => {
		// if new node was created, it creates a checkbox item for it
		// TODO we should optimize it by having "last added node" in vuex store and add only that node without finding
		if (!this.checkboxes.find(ch => ch.id === n.id)) {
		this.checkboxes.push({
		isChecked: false,
		isOpen: false,
		nodeId: n.id
		//isSelected: n.isSelected
		})
		}

		// checks if isSelected attr changed and sets isChecked
		this.checkboxes[index].isChecked = n.isSelected
		//this.checkboxes[index].isSelected = n.isSelected
		index++
		})
		},
		deep: true
		}
		},

		@@ -130,6 +143,7 @@ export default {
		isChecked: false,
		isOpen: false,
		nodeId: n.id
		//isSelected: n.isSelected
		})
		this.updateNodeIsGroupedAttr(n.id, false)
		//console.log('ch', checkboxes)
		@@ -142,7 +156,12 @@ export default {

		methods: {
		...mapActions('data', ['groupNodes', 'ungroupNode', 'updateNodes']),
		...mapActions('interaction', ['clearCloseNodeSelection', 'showNodeSelection']),
		...mapActions('interaction', [
		'selectNode',
		'deselectNode',
		'clearCloseNodeSelection',
		'showNodeSelection'
		]),
		...mapGetters('data', ['getNodes']),
		...mapMutations('interaction', [
		'SET_NODE_HIGHLIGHT',
		@@ -186,13 +205,14 @@ export default {

		selectAllNodes() {
		this.nodes.forEach(n => {
		this.SELECT_NODE(n.id)
		this.selectNode(n.id)
		//this.SELECT_NODE(n.id)
		})
		// nodes isSelected attributes are updated from checkAllCheckboxes
		},

		test(test = 'test') {
		console.log(test)
		console.log(this.getHoveredNode)
		}
		}
		}

src/store/modules/interaction.store.js

+7 −1

Original line number	Diff line number	Diff line
		@@ -115,9 +115,15 @@ export const actions = {
		if (state.selectedNodes.length !== 0) return
		commit('SET_TOOL_SHOW', { tool: 'nodeSelection', bool: false })
		},

		selectNode({ commit, dispatch }, id) {
		commit('SELECT_NODE', id)
		dispatch('data/updateNodes', [{ id: id, isSelected: true }], { root: true })
		},
		deselectNode({ commit, dispatch }, id) {
		commit('DESELECT_NODES', [id])
		dispatch('hideNodeSelectionIfEmpty')
		dispatch('hideNodeSelectionIfEmpty') // TODO maybe doesn't need to be here if we're checking only when selectedNodes.length === 0
		dispatch('data/updateNodes', [{ id: id, isSelected: false }], { root: true })
		},

		showTagCreation({ commit }) {