add elements

2026-07-02 02:49:16 +00:00 · 2026-04-03 01:26:54 +03:00
parent f0a1835fa2
commit 7684a2a871
29 changed files with 3600 additions and 177 deletions
--- a/frontend/src/components/panels/PropertiesPanel.vue
+++ b/frontend/src/components/panels/PropertiesPanel.vue
@@ -10,6 +10,11 @@ import type {
  PageNumberElement,
  BarcodeElement,
  RepeatingTableElement,
+  CurrentDateElement,
+  ShapeElement,
+  CheckboxElement,
+  CalculatedTextElement,
+  RichTextElement,
 } from '../../core/types'
 import PositioningProperties from '../properties/PositioningProperties.vue'
 import SizeProperties from '../properties/SizeProperties.vue'
@@ -18,6 +23,11 @@ import LineProperties from '../properties/LineProperties.vue'
 import ImageProperties from '../properties/ImageProperties.vue'
 import PageNumberProperties from '../properties/PageNumberProperties.vue'
 import BarcodeProperties from '../properties/BarcodeProperties.vue'
+import CurrentDateProperties from '../properties/CurrentDateProperties.vue'
+import ShapeProperties from '../properties/ShapeProperties.vue'
+import CheckboxProperties from '../properties/CheckboxProperties.vue'
+import CalculatedTextProperties from '../properties/CalculatedTextProperties.vue'
+import RichTextProperties from '../properties/RichTextProperties.vue'
 import ContainerProperties from '../properties/ContainerProperties.vue'
 import RepeatingTableProperties from '../properties/RepeatingTableProperties.vue'
 import '../../styles/properties.css'
@@ -35,7 +45,10 @@ const elementTypeLabel = computed(() => {
  const el = selectedElement.value
  if (!el) return ''
  switch (el.type) {
-    case 'container': return 'Container'
+    case 'container':
+      if (el.id === 'header') return 'Üst Bilgi'
+      if (el.id === 'footer') return 'Alt Bilgi'
+      return 'Container'
    case 'static_text': return 'Metin'
    case 'text': return 'Metin'
    case 'line': return 'Cizgi'
@@ -43,10 +56,28 @@ const elementTypeLabel = computed(() => {
    case 'image': return 'Gorsel'
    case 'page_number': return 'Sayfa No'
    case 'barcode': return 'Barkod'
+    case 'checkbox': return 'Onay Kutusu'
+    case 'shape': return 'Sekil'
+    case 'current_date': return 'Tarih'
+    case 'calculated_text': return 'Hesaplanan Metin'
+    case 'rich_text': return 'Zengin Metin'
+    case 'page_break': return 'Sayfa Sonu'
    default: return 'Eleman'
  }
 })

+function toggleHeader(e: Event) {
+  const checked = (e.target as HTMLInputElement).checked
+  if (checked) templateStore.enableHeader()
+  else templateStore.disableHeader()
+}
+
+function toggleFooter(e: Event) {
+  const checked = (e.target as HTMLInputElement).checked
+  if (checked) templateStore.enableFooter()
+  else templateStore.disableFooter()
+}
+
 function deleteElement() {
  const id = editorStore.selectedElementId
  if (!id || id === 'root') return
@@ -70,41 +101,85 @@ function deleteElement() {
        </div>
      </div>

-      <PositioningProperties :element="selectedElement" />
-      <SizeProperties :element="selectedElement" />
+      <!-- Page break: minimal info, just delete -->
+      <template v-if="selectedElement.type === 'page_break'">
+        <div class="prop-section">
+          <button class="prop-delete-btn" @click="deleteElement">Sil</button>
+        </div>
+      </template>

-      <TextProperties
-        v-if="selectedElement.type === 'static_text' || selectedElement.type === 'text'"
-        :element="selectedElement" />
+      <template v-else>
+        <PositioningProperties :element="selectedElement" />
+        <SizeProperties :element="selectedElement" />

-      <LineProperties
-        v-if="selectedElement.type === 'line'"
-        :element="(selectedElement as LineElement)" />
+        <TextProperties
+          v-if="selectedElement.type === 'static_text' || selectedElement.type === 'text'"
+          :element="selectedElement" />

-      <ImageProperties
-        v-if="selectedElement.type === 'image'"
-        :element="(selectedElement as ImageElement)" />
+        <LineProperties
+          v-if="selectedElement.type === 'line'"
+          :element="(selectedElement as LineElement)" />

-      <PageNumberProperties
-        v-if="selectedElement.type === 'page_number'"
-        :element="(selectedElement as PageNumberElement)" />
+        <ImageProperties
+          v-if="selectedElement.type === 'image'"
+          :element="(selectedElement as ImageElement)" />

-      <BarcodeProperties
-        v-if="selectedElement.type === 'barcode'"
-        :element="(selectedElement as BarcodeElement)" />
+        <PageNumberProperties
+          v-if="selectedElement.type === 'page_number'"
+          :element="(selectedElement as PageNumberElement)" />

-      <ContainerProperties
-        v-if="isContainer(selectedElement)"
-        :element="(selectedElement as ContainerElement)" />
+        <BarcodeProperties
+          v-if="selectedElement.type === 'barcode'"
+          :element="(selectedElement as BarcodeElement)" />

-      <RepeatingTableProperties
-        v-if="selectedElement.type === 'repeating_table'"
-        :element="(selectedElement as RepeatingTableElement)" />
+        <CurrentDateProperties
+          v-if="selectedElement.type === 'current_date'"
+          :element="(selectedElement as CurrentDateElement)" />

-      <!-- Delete -->
-      <div v-if="selectedElement.id !== 'root'" class="prop-section">
-        <button class="prop-delete-btn" @click="deleteElement">Sil</button>
-      </div>
+        <CheckboxProperties
+          v-if="selectedElement.type === 'checkbox'"
+          :element="(selectedElement as CheckboxElement)" />
+
+        <CalculatedTextProperties
+          v-if="selectedElement.type === 'calculated_text'"
+          :element="(selectedElement as CalculatedTextElement)" />
+
+        <RichTextProperties
+          v-if="selectedElement.type === 'rich_text'"
+          :element="(selectedElement as RichTextElement)" />
+
+        <ShapeProperties
+          v-if="selectedElement.type === 'shape'"
+          :element="(selectedElement as ShapeElement)" />
+
+        <ContainerProperties
+          v-if="isContainer(selectedElement)"
+          :element="(selectedElement as ContainerElement)" />
+
+        <RepeatingTableProperties
+          v-if="selectedElement.type === 'repeating_table'"
+          :element="(selectedElement as RepeatingTableElement)" />
+
+        <!-- Header/Footer toggles for root element -->
+        <div v-if="selectedElement.id === 'root'" class="prop-section">
+          <div class="prop-section__title">Sayfa Ust/Alt Bilgi</div>
+          <div class="prop-row">
+            <label class="prop-label">Ust Bilgi (Header)</label>
+            <input type="checkbox" :checked="!!templateStore.template.header"
+              @change="toggleHeader" />
+          </div>
+          <div class="prop-row">
+            <label class="prop-label">Alt Bilgi (Footer)</label>
+            <input type="checkbox" :checked="!!templateStore.template.footer"
+              @change="toggleFooter" />
+          </div>
+        </div>
+
+        <!-- Delete -->
+        <div v-if="selectedElement.id !== 'root'" class="prop-section">
+          <button class="prop-delete-btn" @click="deleteElement">Sil</button>
+        </div>
+      </template>
    </template>
  </div>
 </template>
--- a/frontend/src/components/panels/ToolboxPanel.vue
+++ b/frontend/src/components/panels/ToolboxPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEditorStore } from '../../stores/editor'
 import { useSchemaStore } from '../../stores/schema'
-import type { TemplateElement, RepeatingTableElement, TableColumn, ImageElement, PageNumberElement, BarcodeElement } from '../../core/types'
+import type { TemplateElement, RepeatingTableElement, TableColumn, ImageElement, PageNumberElement, BarcodeElement, PageBreakElement, CurrentDateElement, ShapeElement, CheckboxElement, CalculatedTextElement, RichTextElement } from '../../core/types'
 import { sz } from '../../core/types'
 import { schemaFormatToFormatType, defaultAlignForSchema } from '../../core/schema-parser'

@@ -32,6 +32,21 @@ const tools: ToolItem[] = [
      content: 'Yeni metin',
    }),
  },
+  {
+    label: 'Zengin Metin',
+    icon: 'R',
+    create: (): RichTextElement => ({
+      id: nextId('rt'),
+      type: 'rich_text',
+      position: { type: 'flow' },
+      size: { width: sz.auto(), height: sz.auto() },
+      style: { fontSize: 11, color: '#000000' },
+      content: [
+        { text: 'Zengin ', style: {} },
+        { text: 'metin', style: { fontWeight: 'bold' } },
+      ],
+    }),
+  },
  {
    label: 'Container',
    icon: '▢',
@@ -96,6 +111,7 @@ const tools: ToolItem[] = [
          fontSize: 10,
          headerFontSize: 10,
        },
+        repeatHeader: true,
      }
    },
  },
@@ -135,6 +151,62 @@ const tools: ToolItem[] = [
      style: {},
    }),
  },
+  {
+    label: 'Onay Kutusu',
+    icon: '☑',
+    create: (): CheckboxElement => ({
+      id: nextId('cb'),
+      type: 'checkbox',
+      position: { type: 'flow' },
+      size: { width: sz.auto(), height: sz.auto() },
+      checked: false,
+      style: { size: 4, checkColor: '#000000', borderColor: '#333333', borderWidth: 0.3 },
+    }),
+  },
+  {
+    label: 'Sekil',
+    icon: '⬜',
+    create: (): ShapeElement => ({
+      id: nextId('shp'),
+      type: 'shape',
+      position: { type: 'flow' },
+      size: { width: sz.fr(1), height: sz.fixed(20) },
+      shapeType: 'rectangle',
+      style: { backgroundColor: '#f0f0f0', borderColor: '#333333', borderWidth: 0.5 },
+    }),
+  },
+  {
+    label: 'Hesaplanan',
+    icon: 'ƒ',
+    create: (): CalculatedTextElement => ({
+      id: nextId('calc'),
+      type: 'calculated_text',
+      position: { type: 'flow' },
+      size: { width: sz.auto(), height: sz.auto() },
+      expression: '0',
+      style: { fontSize: 11, color: '#000000' },
+    }),
+  },
+  {
+    label: 'Tarih',
+    icon: '📅',
+    create: (): CurrentDateElement => ({
+      id: nextId('dt'),
+      type: 'current_date',
+      position: { type: 'flow' },
+      size: { width: sz.auto(), height: sz.auto() },
+      style: { fontSize: 10, color: '#666666' },
+      format: 'DD.MM.YYYY',
+    }),
+  },
+  {
+    label: 'Sayfa Sonu',
+    icon: '⏎',
+    create: (): PageBreakElement => ({
+      id: nextId('pb'),
+      type: 'page_break',
+    }),
+  },
 ]

 function onDragStart(e: DragEvent, tool: ToolItem) {