pivotick v3.0.0

---

محورية / RendererOptions / NodeStyle

واجهة: NodeStyle

محدد في: interfaces/RendererOptions.ts:468

خصائص

badges?

optional badges: (node) => NodeBadge[] | NodeBadge[]

محدد في: interfaces/RendererOptions.ts:585

مؤشرات صغيرة مثبتة على حافة العقدة، مستقلة عن كل قناة أخرى — انظر NodeBadge.

تم حلها مثل أي قناة أخرى: الإعلان الأضيق يفوز بشكل مباشر وليس الدمج، لذا فإن العقدة badges تستبدل أيًا كان nodeStyleMap أو defaultNodeStyle أعطاها. المصفوفة الفارغة هي الطريقة لقول "هذا لا يرتدي شيئًا"؛ undefined لا يعرض أي مجموعة شارات على الإطلاق.

أربعة تناسب عقدة عادية، واثنان على واحد مع الأطفال (تحتفظ سعة التوسيع بـ الزوايا الشرقية). أي شيء يتجاوز ذلك ينهار في شارة +n لتسمية الباقي.

---

color

color: string | (node) => string

محدد في: interfaces/RendererOptions.ts:478

اللون الرئيسي للعقدة

الافتراضي

'var(--pvt-node-color, #007acc)'

---

focusTier?

optional focusTier: Clearable<Omit<Partial<NodeStyle>, "tiers" | "focusTier" | "focusTierYieldsAt" | "layoutSize" | "styleCb">>

محدد في: interfaces/RendererOptions.ts:615

الرسم المستخدم أثناء تحريك هذه العقدة، أو تحديدها من تلقاء نفسها — مهما كان تكبير. هذا هو المكان الذي تقول فيه العقدة كل شيء عن نفسها.

يتم دمجها عبر النمط base الذي تم حله بدلاً من الطبقة النشطة، لذا فإن الشريحة الطبقة shape أو html لا يمكن أن تتسرب إليها، ولها حجم ثابت على الشاشة مهما تم تصغير الرسم البياني. لا يغير أبدًا هندسة العقدة: تبقى الحواف الهبوط على الطبقة أدناه ولا شيء يتحرك.

عندما تشتعل يكون GraphRendererOptions.focusTierTrigger ليقول.

---

focusTierYieldsAt?

optional focusTierYieldsAt: number

محدد في: interfaces/RendererOptions.ts:630

الفهرس في الطبقات منها focusTier يتوقف عن إطلاق النار. بينما العقدة تم رسمه على هذا المستوى أو على مستوى أكثر ثراءً، قم بالتحويم واختيار وحيد اتركه كما هو، لرسم التركيز الذي تظهره طبقة التكبير/التصغير بالفعل. عند عدم الضبط، يتم تفعيل رسم التركيز في كل طبقة. تم التجاهل على عقدة لا تحتوي على tiers.

مثال

// Hovering the dot shows the chip; once the chip tier is drawn, hovering adds nothing.
tiers: [{ width: 140, height: 44, style: { shape: 'none', html: chipFor } }],
focusTier: { shape: 'none', html: chipFor },
focusTierYieldsAt: 0,

---

fontFamily

fontFamily: string

محدد في: interfaces/RendererOptions.ts:486

الافتراضي

'var(--pvt-font-family)'

---

html()?

optional html: (node) => string | void | HTMLElement

محدد في: interfaces/RendererOptions.ts:572

HTML الذي سيتم استخدامه داخل العقدة كعنصر SVGForeignObject.

تم حلها مثل أي قناة أخرى، بحيث يمكن الإعلان عن البطاقة على أي مستوى — nodeStyleMap[type].html يمنح نوعًا واحدًا من العقد بطاقة بينما يحتفظ الباقي ببطاقة الأشكال، والنمط الخاص بالعقدة الواحدة يتجاوز ذلك. إرجاع لا شيء لا يعني لا البطاقة، لذلك يمكن لرد اتصال واحد أن يقوم ببطاقة بعض العقد وترك العقد الأخرى بمفردها.

قم بإقرانها بـ shape: 'none' للحصول على بطاقة هي العقدة. وإلا فإن الشكل لا تزال مرسومة خلفها، وsize هي أصغر عقدة يمكن أن تكون.

يتم قياس البطاقة وتنمو العقدة إليها، لذلك لا يتم قصها أبدًا وتهبط حوافها على حدودها. ليس عليك أن تجعل العنصر الذي تم إرجاعه يتغير حجمه ذاتيًا، فهو كذلك يتم قياسه داخل صندوق قابل للانكماش، لذا فإن width: 100% يتحلل ضد نفسه المحتوى وليس ضد العنصر النائب.

موثوق HTML فقط. مهما كان هذا العائد يتم إدراجه كما هو، لذلك قم ببنائه باستخدام textContent (أو الهروب منه) بدلاً من استيفاء بيانات العقدة في سلسلة ترميزية.

المعلمات

node

Node

المرتجعات

string | void | HTMLElement

---

iconClass?

optional iconClass: string

محدد في: interfaces/RendererOptions.ts:530

---

iconUnicode?

optional iconUnicode: string

محدد في: interfaces/RendererOptions.ts:531

---

imageFit?

optional imageFit: (node) => ImageFit | ImageFit

محدد في: interfaces/RendererOptions.ts:548

كيف توجد صورة imagePath على شكل العقدة. قابلة للحل لكل عقدة ذلك يمكن للعقد المختلفة مزج الأوضاع (مثل لقطات الشاشة 'cover' والمرفقات الأخرى 'icon').

الافتراضي

'icon'

---

imagePath?

optional imagePath: string

محدد في: interfaces/RendererOptions.ts:542

عنوان URL للصورة المراد رسمها على العقدة. يقتصر على http:، https:، data: و blob: المخططات؛ يتم تجاهل أي شيء آخر. يؤدي عرضه إلى جلب عنوان URL.

---

layoutSize?

optional layoutSize: number

محدد في: interfaces/RendererOptions.ts:641

نصف عرض المربع الذي تحتفظ به هذه العقدة لنفسها في التخطيط، في وحدات الرسم البياني. هذا هو الحجم الوحيد الذي تراه المحاكاة على الإطلاق: اضبطه ولم يعد الرسم يعمل نصف قطر الاصطدام، بحيث يمكن للعقدة تغيير كيفية رسمها دون تحريك أي شيء.

اتركه بدون ضبط وسيمتلك الرسم التباعد، كما هو الحال دائمًا - مسافات الشكل إنها size، بطاقة HTML بما تقيسه.

الافتراضي

نصف الطبقة المعلنة الأوسع width، أو يتم إلغاء تعيينها في حالة عدم وجود طبقات

---

shape

shape: (node) => NodeShape | NodeShape

محدد في: interfaces/RendererOptions.ts:473

شكل العقدة، إما شكل قياسي أو مسار SVG مخصص

الافتراضي

circle

---

size

size: number | (node) => number

محدد في: interfaces/RendererOptions.ts:480

الافتراضي

10

---

strokeColor

strokeColor: string | (node) => string

محدد في: interfaces/RendererOptions.ts:482

الافتراضي

'var(--pvt-node-stroke, #fff)'

---

strokeWidth

strokeWidth: string | number

محدد في: interfaces/RendererOptions.ts:484

الافتراضي

'var(--pvt-node-stroke-width, 2)'

---

styleCb()?

optional styleCb: (node) => Partial<NodeStyle>

محدد في: interfaces/RendererOptions.ts:653

رد الاتصال لتجاوز خصائص النمط ديناميكيًا بناءً على العقدة.

يعتمد مكان وجوده على كتلة النمط التي تعلن عنها. على عقدة النمط يفوز تمامًا، ويتم تخطي nodeStyleMap بالكامل. على render.defaultNodeStyle هو الشكل المحسوب للفتحة الافتراضية: يملأ فقط ما لا العقدة ولا nodeStyleMap مجموعة (وما لكل عقدة styleCb تم استبعادها)، وما زالت نتيجتها تخسر أمام كليهما.

يتم تشغيله مرة واحدة لكل عقدة لكل عرض، لذا اجعله رخيصًا.

المعلمات

node

Node

المرتجعات

Partial<NodeStyle>

---

svgIcon?

optional svgIcon: string

محدد في: interfaces/RendererOptions.ts:537

علامة SVG مضمنة مرسومة داخل العقدة. تم تطهيرها قبل أن تصل إلى DOM (scripting ويتم تجريد معالجات الأحداث)، ولكن لا يزال يتم جلب جهاز التحكم عن بعد <image href> بداخله عند عرض العقدة - راجع دليل الأمان.

---

text?

optional text: string | (node) => string

محدد في: interfaces/RendererOptions.ts:552

النص الذي سيتم استخدامه داخل العقدة كعنصر SVGText

---

textAnchorPosition

textAnchorPosition: "end" | "start" | "middle"

محدد في: interfaces/RendererOptions.ts:490

الافتراضي

'middle'

---

textColor

textColor: string | (node) => string

محدد في: interfaces/RendererOptions.ts:488

الافتراضي

'var(--pvt-node-text-color, #fff)'

---

textFontSize?

optional textFontSize: number | (node) => number

محدد في: interfaces/RendererOptions.ts:529

حجم خط تسمية العقدة، بوحدات الرسم البياني (CSS بكسل عند التكبير/التصغير 1). التسمية الإزاحة، وميزانية الشخصية المضمنة وبوابة التكبير/التصغير تتبعها جميعها.

الافتراضي

undefined — derived from the node's size: max(12, size × 0.45)

---

textHorizontalShift

textHorizontalShift: number | (node) => number

محدد في: interfaces/RendererOptions.ts:497

تم تطبيق التحول الأفقي على موضع تسمية العقدة. القيمة 0 تعني أنها متمركزة في العقدة، والقيمة 1 تقع شرق العقدة، و-1 تقع غرب العقدة. يتم أيضًا قبول القيم الأخرى، على سبيل المثال، 0.5 ستكون في منتصف المسافة بين مركز العقدة وشرقها.

الافتراضي

0

---

textMaxWidth?

optional textMaxWidth: number | (node) => number

محدد في: interfaces/RendererOptions.ts:523

يمكن رسم تسمية العقدة على أوسع نطاق، بوحدات الرسم البياني (CSS بكسل عند التكبير/التصغير 1). تسمية أطول يتم تقصيره بعلامة حذف متوسطة لتناسبه. يحل محل الميزانية المضمنة، وهو الحجم إلى العقدة. يتم التجاهل عندما يكون textTruncate هو false.

الافتراضي

undefined — the built-in budget

---

textRotateDegree

textRotateDegree: number | (node) => number

محدد في: interfaces/RendererOptions.ts:510

يتم تطبيق درجة الدوران على تسمية العقدة. تدور القيم الموجبة في اتجاه عقارب الساعة، بينما تدور القيم السالبة في عكس اتجاه عقارب الساعة.

الافتراضي

0

---

textTruncate

textTruncate: boolean | (node) => boolean

محدد في: interfaces/RendererOptions.ts:516

قم بتقصير الملصق العريض باستخدام علامة القطع الوسطى (head…tail)؛ false يرسمها بالكامل، على قرص ذو طابع خاص حيث ينسكب عبر العقدة.

الافتراضي

true

---

textVerticalShift

textVerticalShift: number | (node) => number

محدد في: interfaces/RendererOptions.ts:504

يتم تطبيق التحول الرأسي على موضع تسمية العقدة. القيمة 0 تعني أنها متمركزة في العقدة، والقيمة 1 شمال العقدة، و-1 جنوب العقدة. يتم أيضًا قبول القيم الأخرى، على سبيل المثال، 0.5 سيكون في منتصف المسافة بين المركز وشمال العقدة.

الافتراضي

0

---

tiers?

optional tiers: NodeTier[]

محدد في: interfaces/RendererOptions.ts:603

رسومات بديلة لهذه العقدة، يتم اختيارها حسب الحجم الذي يتم عرضه حاليًا - حرف رسومي في نظرة عامة، شريحة تحمل علامة عندما يكون هناك مكان لشخص واحد، وبطاقة عندما يكون هناك مكان لذلك. أمرت أصغر أولا؛ أغنى ما يناسبه يفوز، والأسلوب الأساسي هو الكلمة عندما لا يفعل أي شيء.

لا تتغير بصمة العقدة أبدًا مع الرسم (انظر layoutSize)، لذا تبديل الطبقات لا يحرك شيئا.

مثال

tiers: [
  { width: 32, height: 32, style: { shape: 'circle', size: 16 } },
  { width: 140, height: 44, style: { shape: 'none', html: chipFor } },
]